vue中将多个echart图表和表格导入到excel中（2）

vue中通过插件exceljs和file-saver将多个echarts的图和表格导出到excel表格中

1.实现的效果

2.安装echarts、exceljs和file-saver等库

npm install exceljs file-saver --save
npm install echarts --save

3.具体实现代码

安装好相应的库后，渲染echarts图时要给出height和width属性，不然可能无法显示图表。
完整代码如下：

<template>
  <div>
    <div ref="chart1" id="lineChart1" style="height: 400px; width: 800px"></div>
    <div ref="chart2" id="lineChart2" style="height: 400px; width: 800px"></div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
    <el-button @click="exportExcel"> 导出图表</el-button>
  </div>
</template>

<script>
import * as echarts from "echarts" // 引入echarts, * as echarts 表示引入所有的方法
import ExcelJS from "exceljs" // 引入exceljs, 用于生成excel文件
import { saveAs } from "file-saver" // 引入file-saver, 用于保存文件

export default {
  data() {
    return {
      chart1: null,
      chart2: null,
      tableData:[{
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }]
    }
  },
  mounted() {
    this.chart1 = echarts.init(this.$refs.chart1)
    this.chart2 = echarts.init(this.$refs.chart2)

    // 绘制图表
    const option1 = {
      title: {
        text: "Echarts 示例"
      },
      tooltip: {},
      legend: {
        data: ["数据"]
      },
      xAxis: {
        data: ["1月", "2月", "3月", "4月", "5月", "6月"]
      },
      yAxis: {},
      series: [
        {
          name: "数据",
          type: "bar",
          data: [100, 200, 300, 400, 500, 600],
          markLine: {
            data: [{ type: "average", name: "平均值" }]
          }
        }
      ]
    }

    const option2 = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line"
        }
      ]
    }
    this.chart1.setOption(option1)
    this.chart2.setOption(option2)
  },
  methods: {
    exportChartToExcel(chartRef, range, workbook, worksheet) {
      const chart = echarts.getInstanceByDom(this.$refs[chartRef]); // 获取图表实例
      const base64Image = chart.getDataURL({
        pixelRatio: 2, // 导出图片的分辨率比例，默认为1
        backgroundColor: "#fff", // 导出图片的背景色
      });
      let image = workbook.addImage({
        base64: base64Image, // 图片的base64编码
        extension: "png", // 图片的扩展名
      });
      worksheet.addImage(image, range); // 将图片添加到工作表中
    },

    exportExcel() {
      const workbook = new ExcelJS.Workbook(); // 创建工作簿
      const worksheet = workbook.addWorksheet("Sheet1"); // 添加工作表

      // 导出第一个图表
      this.exportChartToExcel("chart1", "A1:J20", workbook, worksheet);

      // 导出第二个图表
      this.exportChartToExcel("chart2", "A25:J45", workbook, worksheet);

      // 导出表格数据
      // const tableRange = { tl: { col: 0, row: 60 }, br: { col: 3, row: 80 } };
      // this.tableData.forEach((item, index) => {
      //   worksheet.addRow([item.date, item.name, item.address]);
      // });
      worksheet.addRows([
        [],
        ["Date", "Name", "Address"],
        ...this.tableData.map((item) => [item.date, item.name, item.address]),
      ]);

      // 生成excel文件并保存
      workbook.xlsx.writeBuffer().then(function (buffer) {
        saveAs(
          new Blob([buffer], {
            type: "application/octet-stream",
          }),
          "xchart.xlsx"
        );
      });
    }
  }
}
</script>

注意：
下载时由于浏览器安全策略会出现如下情况，请点击保留。同时，控制台这个错误是浏览器报告的安全性警告。它指示下载文件时出现了安全风险，因为文件是通过不安全的 HTTP 连接加载的，而不是安全的 HTTPS 连接。HTTPS 提供了加密和认证功能，能够保护数据的安全性和完整性，该错误调试时可忽略。