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

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

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

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

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

具体步骤如下：

从后台接口获取图片的Base64编码。
在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编码格式的前缀。

将表格导出为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文件发送给其他人，在任何地方，在任何系统中，该图片都可以正确显示。

这个问题的回答你可以参考下: https://ask.csdn.net/questions/1105073
我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：vue里面table组件直接导出excel文档（并解决科学计数法问题）
除此之外, 这篇博客: vue 过滤数组数据，用于控制 el-table 某一行是否显示中的 vue 过滤数组数据，用于控制 el-table 某一行是否显示 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

场景：第一次查出来的数据用list接收。然后我第二次要用到list里面的数据，但是我想过滤掉选中的某一条用户的信息，这个时候就使用 filter 函数对list 进行过滤。很简单，做个笔记。

<el-dialog title="克隆规则" :visible.sync="cloneDialogVisible" width="600px">
      <el-table
        v-loading="listLoading"
        :data="list2"	//绑定的是list2
        element-loading-text="Loading"
        empty-text="没有数据了哦"
        border
        fit
        stripe
        :row-key="getRowKey"
        @selection-change="handleSelectionChange"
>

//过滤数据代码
showCloneRuleslView(user_id) {
        this.SourceUserId = parseInt(user_id)
        //filter过滤函数使用
        this.list2 = this.list.filter((data) => {
        //过滤掉SourceUserId这条数据
          return data.user_id !== this.SourceUserId
        })
        this.cloneDialogVisible = true
      	console.log(this.SourceUserId)
    },