一：安装依赖
npm install xlsx file-saver --save
二：在组件中导入
import ExcelJS from "exceljs";
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx/xlsx.mjs'
三：给对应表格添加id，绑定方法
<ECharts ref="echartRef" />
<el-button @click="exportExcel">导出 Excel</el-button>
四：只导出echarts
// dom: echartRef.value (对应要导出的echarts图表)
// fileName：'test.xlsx' (文件名)
const exportExcel = (dom, fileName) => {const workbook = new ExcelJS.Workbook(); // 创建工作簿const worksheet = workbook.addWorksheet('Sheet1'); // 添加工作表const base64Image = dom.getDataURL({pixelRatio: 2, // 导出图片的分辨率比例，默认为1，即图片的分辨率为屏幕分辨率的一倍backgroundColor: '#fff' // 导出图片的背景色})let image= workbook.addImage({ // 添加图片base64: base64Image, // 图片的base64编码extension: 'png' // 图片的扩展名});worksheet.addImage(image, 'A1:J20'); // 将图片添加到工作表中workbook.xlsx.writeBuffer().then(function (buffer) { // 生成excel文件的二进制数据FileSaver.saveAs(new Blob([buffer], { // 生成Blob对象type: 'application/octet-stream' // 指定文件的MIME类型}), fileName); // 指定文件名});
}
五：导出echarts+表格
// dom: echartRef.value (对应要导出的echarts图表)
// tableColunms： 表头
// tableRows： 行内数据
// fileName：'test.xlsx' (文件名)const exportExcel = (dom, tableColunms, tableRows, fileName) => {const workbook = new ExcelJS.Workbook(); // 创建工作簿const worksheet = workbook.addWorksheet('Sheet1'); // 添加工作表const base64Image = dom.getDataURL({pixelRatio: 2, // 导出图片的分辨率比例，默认为1，即图片的分辨率为屏幕分辨率的一倍backgroundColor: '#fff' // 导出图片的背景色})let image= workbook.addImage({ // 添加图片base64: base64Image, // 图片的base64编码extension: 'png' // 图片的扩展名});// 将图片添加到工作表中// worksheet.addImage(image, 'A1:J20');// 添加到sheet2中// workbook.addWorksheet('Sheet2').addImage(image, 'A1:J20')// 将图片添加到工作表中worksheet.addImage(image, {// 指定在哪个单元格插入tl: { col: 0, row: tableRows.length + 3 },// 指定图像大小ext: { width: 1000, height: 400 }});// 表头worksheet.columns = tableColunms.map((v: any) => {return {header: v.label,key: v.prop,width: 15,}})// 表格数据tableRows.forEach((row: any, index: any) => {row.sort = index + 1worksheet.addRow(row)})workbook.xlsx.writeBuffer().then(function (buffer) { // 生成excel文件的二进制数据FileSaver.saveAs(new Blob([buffer], { // 生成Blob对象type: 'application/octet-stream' // 指定文件的MIME类型}), fileName); // 指定文件名});}
表格的测试数据
// 添加表头列数据
worksheet.columns = [{label: "姓名", prop: "name", width: 20},{label: "年龄", prop: "age", width: 10},{label: "身高", prop: "height", width: 10},{label: "体重", prop: "weight", width: 10},
];
// 添加内容列数据
worksheet.addRow({sort: 1, name: "张三", age: 18, height: 175, weight: 74});
worksheet.addRow({sort: 2, name: "李四", age: 22, height: 177, weight: 88});
worksheet.addRow({sort: 3, name: "王五", age: 53, height: 155, weight: 62});六：实现效果
前端element表格导出excel
vue中将echarts的图导出到excel表格中（1）
VUE前端使用exceljs导出table以及echart图 生成excel文件
vue中xlsx导出多个sheet页（多个表格多个sheet页）