vue 借助插件js-table2excel 实现导出excel，并导出图片到excel。

一、界面展示

二、excel展示

三、工具：table2excel

1. 安装插件

yarn add js-table2excel

2.代码实现

<template>
  <div class="box">
    <a-button @click="exportFn">导出</a-button>
    <vxe-table :data="tableData">
      <vxe-column type="seq"></vxe-column>
      <vxe-column field="date" title="日期"></vxe-column>
      <vxe-column field="num" title="数量"></vxe-column>
      <vxe-column field="photo" title="头像" >
        <template #default="{ row }">
          <img :src="row.photo" alt="" style="height:50px">
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script>
const originData = [
  {
    date: '2022年10月1日',
    num: 2,
    photo:'此处为base64格式图片,字符长度大不展示。'
  },
  {
    date: '2022年10月2日',
    num: 6,
    photo:'此处为base64格式图片,字符长度大不展示。'

  },
  {
    date: '2022年10月3日',
    num: 4,
    photo:'此处为base64格式图片,字符长度大不展示。'
  }
]
import table2excel from 'js-table2excel'

export default {
  data() {
    return {
      tableData: originData,
    }
  },
  methods: {
    exportFn() {
      let temp = [
        {
          title: '日期',
          key: 'date',
          type: 'text'
        },
        {
          title: '数量',
          key: 'num',
          type: 'text'
        },
        {
          title: '头像', // 输出 excel 列名
          key: 'photo', // 表格对应列字段名
          type: 'image' // 列类型
        }
      ]
      let datas = this.tableData // 表格数据
      let excelName = '数据' // excel 文件名
      table2excel(temp, datas, excelName) 
    }
  }

}
</script>