vue3—使用element-plus表格导出excel表格（带图片）

今天制作后台管理系统，有一个二维码管理页面，要求把表格内的数据全部导出为Excel表格。

表格内有二维码图片，也要导出，制作的第一版是直接将图片的链接导出，但是要求导出能直接看的图片，所以就有了第二版。

第一版：

第二版是将图片链接转换成图片的形式

接下来我就带大家来看看这两版的实现：

第一版

安装xlsx插件

npm install xlsx --save

在项目中引入

import * as XLSX from "xlsx";

导出数据

const data = XLSX.utils.json_to_sheet(tableData.value)//此处tableData.value为表格的数据
const wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, data, 'test-data')//test-data为自定义的sheet表名
XLSX.writeFile(wb,'test.xlsx')//test.xlsx为自定义的文件名

以上就是第一版的实现过程，接下来是第二版。

第二版

下载安装插件：

npm install js-table2excel

引入插件：

	import table2excel from 'js-table2excel'

 onBatchExport方法中数据的key值要与data中保持一致，否则数据无法获取到，打印出的结果就是undefined。

以上就是本章的全部内容了，感谢您的阅读。