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

目录

一、界面展示

二、excel展示

三、工具：table2excel

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: '10月1日',num: 2,photo:'此处为base64格式图片,字符长度大不展示。'},{date: '10月2日',num: 6,photo:'此处为base64格式图片,字符长度大不展示。'},{date: '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>