当前位置：首页 > article >正文

前端将echarts的图和element表格一起导出到excel中

article 2024/12/3 2:14:27

一：安装依赖

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 + 1
    worksheet.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});

六：实现效果
在这里插入图片描述