Angular + xlsx + xlsx-js-style实现多个sheel页Excel下载

需求：前端实现将后台返回的数组数据转化为多页excel，并自定义样式

使用组件

1、xlsx
2、xlsx-js-style（官方：https://www.npmjs.com/package/xlsx-js-style）

xlsx这个插件可以把html中的table元素或者json数据转换成表格后进行导出

常用方法	参数	说明
book_new	-	创建一个空的book
table_to_book	table元素（dom）	将table元素转换成 book
table_to_sheet	table元素（dom）	将table元素转换成 sheet
json_to_sheet	json数据（数组）	将json数据转换成 sheet
book_append_sheet	参数1：book对象，参数2：sheet对象，参数3：sheet名称	将sheet添加到book中
writeFile	参数1：book对象，参数2：导出的文件名称	导出表格文件

本来准备使用 xlsx-style，但引入会报很多错，找到xlsx-js-style组件代替，使用方法相同

一、安装依赖

npm install xlsx --save
npm install file-saver --save
//样式组件
npm install xlsx-js-style

二、代码

//html
<button (click)="handleOk()">下载</button>

//ts
import * as XLSX from 'xlsx/xlsx.mjs';
var FileSaver = require('file-saver');
import * as XLSXStyle from 'xlsx-js-style';

// 下载excel
  exportFile(): void {
    //生成excel表的数据[{},...{}]，每个对象代表一行，key值代表列名
    let json1: any = []
    //数组
    this.DataArr1.forEach(arr => {
      json1.push({
        "id": arr.Id,
        "code": arr.Code,
        "type": arr.Type,
      })
    })
    let json2: any = []
    this.DataArr2.forEach(arr => {
      json2.push({
        "id": arr.Id,
        "code": arr.Code,
        "type": arr.Type,
      })
    })
    const worksheet1: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json1,);
    const worksheet2: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json2,);
    //设置自定义样式
    this.setExlStyle(worksheet1);
    this.setExlStyle(worksheet2);
    const workbook: XLSX.WorkBook = {
      Sheets: { '页面1': worksheet1, "页面2": worksheet2},
      SheetNames: ['页面1', '页面2']
    };
    const excelBuffer: any = XLSXStyle.write(workbook, { bookType: 'xlsx', type: 'array' });
    //转成二进制流
    const data: Blob = new Blob([excelBuffer], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
    });
    FileSaver.saveAs(data, '文件名' + new Date().toLocaleDateString() + '.xls');
  }


//设置自定义样式
setExlStyle(data) {
    data["!cols"] = [];
    for (let key in data) {
      if (data[key] instanceof Object) {
        if (key === 'A1' || key === 'B1' || key === 'C1' || key === 'D1' || key === 'E1' || key === 'F1' || key === 'G1') {
          data[key].s = {
            // 字体
            font: {
              name: 'Microsoft YaHei UI',
              sz: 10,
              color: { rgb: "ffffff" },
              bold: true
            },
            alignment: {
              vertical: 'center',
              horizontal: 'center',
            },
            fill: {
              fgColor: { rgb: "298103" },
            },
          }
        } else {
          data[key].s = {
            // 字体
            font: {
              name: 'Microsoft YaHei UI',
              sz: 10,
            },
            alignment: {
              vertical: 'center',
              horizontal: 'left',
            },
          }
        }
      }
      data["!cols"].push({ wpx: 115 });
    }
    return data;
  }