步骤:
//安装插件
npm install js-table2excel
//导入
import table2excel from 'js-table2excel
// 导出按钮点击后触发事件
const onBatchExport = () => {//导出的规则//title是导出的表头//key是你的数据的属性//type是导出的类型const column = [{title: '序号',key: 'id',type: 'text',},{title: '用户名称',key: 'name',type: 'text',},{title: '用户头像',key: 'image',type: 'image',width: 80,height: 80,},{title: '消费金额',key: 'money',type: 'text',},{title: '加入时间',key: 'addtime',type: 'text',}]const tableDatas = JSON.parse(JSON.stringify(data.value))//data.value是你的数据table2excel(column, tableDatas, `用户列表`)
};
在node_modules/js-table2excel/src/index.js中更改图片的尺寸,找到getImageHtml函数,进行替换
function getImageHtml(val, options) {options = Object.assign({ width: 40, height: 60, scale: 0.65 }, options);const imgWidth = options.width * 0.67;const imgHeight = options.height * options.scale;return `<td style="width:${options.width}px;height:${options.height}px; text-align: center; vertical-align: middle"><div style="display: flex;justify-content: center;align-items: center; width:${options.width}px;height:${options.height}px; text-align: center; margin:auto auto; vertical-align: middle;" ><img width="${imgWidth}" height="${imgHeight}" src="${val}" /></div></td>`;}
也可以自行调整缩放比