vue 中使用原生 js 实现 base64 格式的图片插入到 execl 并下载到本地

207 阅读1分钟
<div @click="generateExcel(errurl)">点击下载</div>
export default {
  name: "home",
  components: {},
  data() {
    return {
      // 图片的 base64 地址
      errurl: "data:image/png;base64,iVBORw0KGgoxxxxx"
    };
  },
  methods: {
    // 生成 Excel 文件并下载到本地
    generateExcel(errurl) {
      // 创建一个带有图片的 HTML 页面
      const htmlContent = `
        <html>
        <head>
          <title>Excel with Image</title>
        </head>
        <body>
           <img src="data:image/png;base64,${errurl}" alt="image">
        </body>
        </html>
      `;

      // 创建一个 Blob 对象
      const blob = new Blob([htmlContent], { type: 'application/vnd.ms-excel' });

      // 创建一个下载链接
      const url = URL.createObjectURL(blob);

      // 创建一个链接元素
      const link = document.createElement('a');
      link.href = url;
      link.download = 'excel_with_image.xlsx';

      // 模拟点击下载链接
      link.click();

      // 释放 URL 对象
      URL.revokeObjectURL(url);
    },
  },
};