vue项目中两种导出excel表单的插件使用

1.XLSX

npm install xlsx      //node安装

import XLSX from 'xlsx'    //页面引入

<button @click="toExportExcel" />      //按钮绑定事件

 toExportExcel(){  

 let datasheet1 = [];     //创建sheet页内容

     this.tableData.forEach(item=>{   //tableData是后端传来的数据

          datasheet1.push({           //拼接表格里面的内容

            身份证号:item.id,              

            姓名:item.name,

            日期:item.date,

            项目编号:item.code

          })  

     })

     let ws = XLSX.utils.json_to_sheet(datasheet1)  //把json格式数据转化成excel能识别的格式

     ws['!cols'] = [   //设置表头宽度

      {wch:30},

      {wch:30},

      {wch:30},

      {wch:30}

     ]

     let wb = XLSX.utils.book_new();  //创建空白文件

     XLSX.utils.book_append_sheet(wb,ws,'sheet') //写入sheet页数据

     XLSX.writeFile(wb,'XXX表格') //下载生成表格

}

2.exceljs

npm install exceljs      //node安装

import ExcelJS from 'exceljs'; //项目引入

async exportToExcel() {

      // 创建工作簿

      const workbook = new ExcelJS.Workbook();

      // 创建工作表

      const worksheet = workbook.addWorksheet('My Sheet');

    // 设置列数据 header表头 key要对应数据 比如数据：[{name:'XXX'}] 这列数据key就是name

    worksheet.columns = [

        { header: "身份证号", key: "id", width: 10},

        { header: "姓名", key: "name", width: 10 },

        { header: "日期", key: "date", width: 10 },

        { header: "项目编号", key: "code", width: 10 }

    ];

    // 批量插入数据

    data.forEach(item => {

           worksheet.addRow(item)

});

      // 定义样式

      const style = { font: { bold: true } };

      worksheet.getRow(1).font = style.font;

      // 导出Excel文件

      const fileName = 'XXX文件.xlsx';

      await workbook.xlsx.writeBuffer({ base64: true }).then(data => {

        const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });

        // 使用blob创建URL

        const url = window.URL.createObjectURL(blob);

        // 利用a标签进行下载

        const link = document.createElement('a');

        link .href = url;

        link .download = fileName;

        document.body.appendChild(link );

        link .click();

        link .remove();

        window.URL.revokeObjectURL(url);

      });

    },