vue el-table图片导出excel再转发不显示图片！

Question

请教个问题:
vue el-table中的图片(从后台接口上获取），导出到本地的excel显示正常，如将此excel传给其他人不显示，请问是什么原因，改如何处理，谢谢！

Answer 1

这个问题可能出现在图片链接地址上，如果导出到本地的excel中的图片是从后台接口获取的，那么图片链接地址很可能是本地地址，如：http://localhost:3000/image.png，这样的地址只能在本地环境中访问。

这会导致当你将该Excel文件发送给其他人时，他们无法访问这些图片，因为此链接只在本地环境中有效，所以他们看不到图片。

为了解决这个问题，你可以将图片转换成base64编码格式并将其嵌入到Excel中。这样做的好处是，图片被嵌入到Excel文件中，不需要保留外部链接，因此无论谁在哪里打开该文件，图片都可以正确显示。

具体步骤如下：

1. 从后台接口获取图片的Base64编码。

2. 在el-table中渲染该Base64编码的图片，例如：

<template>
  <el-table :data="tableData">
    <el-table-column label="图片">
      <template slot-scope="{ row }">
        <img :src="`data:image/png;base64,${row.base64}`" alt="图片">
      </template>
    </el-table-column>
    ...
  </el-table>
</template>

其中base64为你从后台接口获取的图片Base64编码，data:image/png;base64,是Base64编码格式的前缀。

1. 将表格导出为Excel文件，并将Base64编码的图片嵌入到Excel中。可以使用xlsx、file-saver等库来导出Excel文件及处理图片，例如：

import XLSX from 'xlsx';
import FileSaver from 'file-saver';

const ws = XLSX.utils.json_to_sheet(this.tableData);

// 处理表格中的图片，将Base64编码的图片转换成Binary格式并嵌入Excel中
const headers = ['图片'];
const data = this.tableData.map(row => {
  return [this.base64ToBlob(row.base64)];
});
const sheet = XLSX.utils.aoa_to_sheet([headers, ...data]);
XLSX.utils.book_append_sheet(XLSX.utils.book_new(), sheet);

// 保存Excel文件
const wbout = XLSX.write(wb, {
  bookType: 'xlsx',
  bookSST: true,
  type: 'array',
});

const blob = new Blob([wbout], { type: 'application/octet-stream' });
FileSaver.saveAs(blob, 'table.xlsx');

其中，base64ToBlob方法用于将Base64编码转换为二进制格式。

base64ToBlob(base64) {
  const bstr = atob(base64);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  const blob = new Blob([u8arr], { type: 'image/png' });

  return URL.createObjectURL(blob);
},

这里我们使用了Blob对象将二进制数据打包成二进制块，并使用URL.createObjectURL方法生成图片的URL地址，该地址可以在Excel中嵌入图片。

通过这样的方式，将Base64编码的图片嵌入Excel文件中，无论你将Excel文件发送给其他人，在任何地方，在任何系统中，该图片都可以正确显示。