Excel表格导出，echarts导出图片、导出表格（前端vue）

下包

npm install xlsx --legacy-peer-deps

 引入

import * as XLSX from 'xlsx';

一、表格导出表格 

这个有简单的合并表头

excelFn() {
      // 创建一个新的工作簿
      const wb = XLSX.utils.book_new();
      // 处理表格数据(表头)  格式 ['一期','','二期','','三期','']
      const resultArray = this.custom.series
        .map(obj => {
          const unityToDisplay = obj.unityUsr ? obj.unityUsr : (obj.unity ? obj.unity : '');
          return `${obj.name}${unityToDisplay ? `(${unityToDisplay})` : ''}`;
        })
        .reduce((acc, combined, index) => {
          acc.push(combined);
          acc.push('');
          // }
          return acc;
        }, []);
      // 处理表格数据(内容) 格式[['2024-08-18 00:00:00','0','2024-08-18 00:00:00','0','2024-08-18 00:00:00','0'],[],[]]
      let tableDataNew = this.tableData.map(item => {
        let itemArray = [];
        for (let i = 0; i < this.custom.series.length; i++) {
          itemArray.push(item[`date${i}`], item[`data${i}`]);
        }
        return itemArray;
      });
      const wsData = [
        [...resultArray], //表头   
        ...tableDataNew   // 表格
      ];
      // 创建工作表
      const ws = XLSX.utils.aoa_to_sheet(wsData);
      //定义单元格合并
      let wsMerges = [
        { s: { r: 0, c: 0 }, e: { r: 0, c: 1 } }
      ];
      for (let i = 1; i < this.custom.series.length; i++) {
        const newCStart = wsMerges[wsMerges.length - 1].s.c + 2;
        const newCEnd = wsMerges[wsMerges.length - 1].e.c + 2;
        const newMerge = {
          s: { r: 0, c: newCStart },
          e: { r: 0, c: newCEnd }
        };
        wsMerges.push(newMerge);
      }
      // 设置列宽
      const colsNew = []
      for (let index = 0; index < this.custom.series.length; index++) {
        colsNew.push({ wch: 30 },
          { wch: 15 },)
      }
      //  应用合并和列宽设置
      ws['!merges'] = wsMerges
      ws['!cols'] = colsNew
      // 将工作表添加到工作簿
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
      // 保存工作簿为 Excel 文件
      XLSX.writeFile(wb, '文件名.xlsx');
    },

示例：

没有合并表头的简化版

// 不用合并表头的简化版
    excelFn2() {
      //  处理表格数据（自己的方法）
      const updatedArray = this.staticTableData.map(item => {
        return Object.keys(item).reduce((newObj, key) => {
          newObj[key === 'time' ? '时间' : key] = item[key];
          return newObj;
        }, {});
      });
      const wb = XLSX.utils.book_new();
      const headers = Object.keys(updatedArray[0]);
      const wsData = [
        headers,
        ...updatedArray.map(row => {
          return headers.map(col => row[col]);
        }),
      ];
      const ws = XLSX.utils.aoa_to_sheet(wsData);
      ws['!cols'] = updatedArray.map(() => ({ wch: 20 }));
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
      XLSX.writeFile(wb, '文件名.xlsx');
    }

二、echarts导出图片

 excelFn(){
      const chartBox = echarts.init(document.getElementById('mychart'))
        const imgUrl = chartBox.getDataURL({
          type: 'png',
          pixelRatio: 2,
          backgroundColor: '#fff'
        });
        const link = document.createElement('a');
        link.href = imgUrl;
        link.download = '图片名称.png';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    },

三、echarts导出表格

 和表格导出表格差不多，我这里的列的数据是一个数组，主要是对数据的处理

excelFn(){
        const resultArray = ['日期']
        this.newArray.forEach(item => {
          return resultArray.push(item.name)
        })
        const tableArray = []
        tableArray.push(this.xData)
        this.newArray.forEach(item => {
          return tableArray.push(item.data)
        })
        // 处理表格数据
        // 第一列数组
        // ['2024-10-01', '2024-10-02', '2024-10-03', '2024-10-04']
        // 第二列数组
        // ['2024', '2002', '2023', '200']
        // 组成新的数组[['2024-10-01','2024'],['2024-10-02','2002']] 
        const combinedArray = tableArray[0].map((_, i) => tableArray.map(array => array[i]));
        const wb = XLSX.utils.book_new();
        const wsData = [
          [...resultArray],
          ...combinedArray
        ];
        const ws = XLSX.utils.aoa_to_sheet(wsData);
        const colsNew = []
        for (let index = 0; index < resultArray.length; index++) {
          colsNew.push({ wch: 30 })
        }
        ws['!cols'] = colsNew
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
        XLSX.writeFile(wb, '表格名称.xlsx');
    },

如图示例：