目录
一、界面展示二、excel展示三、工具:table2excel一、界面展示
二、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>