table表格 导出xlsx表格带图片

使用的是 vxe-table 插件中 vxe-grid  

vxe-table v4

这是项目实现效果：

 页面展示效果：

导出 xlxs 的效果

导出 xlsx 带图片的实现

vue html部分

<div class="install"  @click="exp()">下载报表</div>

<vxe-grid ref="tablex" border :data="tableData2" :columns="columnx" > </vxe-grid>

这里的exportData是 vxe-table 提供的API，具体可查vxe-table v4 (vxetable.cn)这里的方法

如果不需要导出图片出来，只需要导出文档，那直接

		exp() {
			this.$refs.tablex.exportData({
				filename: '监控图表',//导出名称
				type: "xlsx",//导出格式
		},

注意：如果 type为‘xlsx'导出失败的话，那还需要安装xlsx插件===npm install xlsx

我的版本是"xlsx": "^0.16.8"

需要像上述效果图导出图片的话===主要是sheetMethod方法实现，我这里就是通过循环把表格的是值为issuccess给它替换成✅，值为isfail替换成❎，用的是 base64

		exp() {
			this.$refs.tablex.exportData({
				filename: '监控图表',//导出名称
				type: "xlsx",//导出格式
				sheetMethod: this.sheetMethod, // 调用实现方法
				useStyle: true,//是否启用样式
				modes: ["current", "selected"] // current当前页，selected选中的，all所有的
			})
		},

		sheetMethod({ options, workbook, worksheet }) {
			const { data } = options;
			const cellValues = {};
			console.log(workbook, worksheet, worksheet.rowCount, worksheet.columnCount)
			for (let rowIndex = 1; rowIndex <= worksheet.rowCount; rowIndex++) {
				for (let colIndex = 1; colIndex <= worksheet.columnCount; colIndex++) {
					const cell = worksheet.getCell(rowIndex, colIndex); // 获取单元格
					const cellValue = cell.value; // 获取单元格的值
					cellValues[`${rowIndex},${colIndex}`] = cellValue; // 存储单元格的值
					if (cellValue === 'issuccess') {
						console.log(rowIndex, colIndex)
						const imgid = workbook.addImage({
							base64: '',//这里我用的是 base64,把需要图片的 base64 放进来
							extension: "png"//使用 png 减小导出大小
						});
						worksheet.addImage(imgid, {
							tl: { col: colIndex - 1 + 0.8, row: rowIndex - 1 + 0.5 }, // 小数0.5是图片在单元格居中显示
							ext: { width: 40, height: 40 } // 设置图片大小
						});
						worksheet.getCell(rowIndex, colIndex).value = "";//这个是清掉原来字段值

					} else if (cellVa