Vue 使用Exceljs库

二话不说，直接上代码

import * as Exceljs from 'exceljs';
import * as FileSaver from 'file-saver';

// excel blob 类型
const blobType: string = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';

/**
 * table 表格数据导出（exceljs库）
 * @param tableDatas 表格绑定数据
 * @param tableColumns 表格列
 * @param fileName 文件名称
 * @param sheetName sheet页名称
 */
export const tableDataExport = (tableDatas, tableColumns, fileName: string = 'Excel.xlsx', sheetName: string = 'Sheet1') => {
  // 表格绑定数据和列数据转换为普通对象
  let dataArr = ReactiveDataToRaw(tableDatas);
  let columnArr = ReactiveDataToRaw(tableColumns) as Array<TableColumnType>;

  // 获取导出数据，需要把json数据转换为值的二维数组
  let exportDataArr = [];
  dataArr.forEach(o => {
    let dataRow = [];
    columnArr.forEach(e => {
      dataRow.push(o[e.field]);
    });
    exportDataArr.push(dataRow);
  });

  // 创建workbook
  let workbook = new Exceljs.Workbook();
  workbook.creator = 'BYD_Hotel_Management_System';
  workbook.created = new Date();
  // 给workbook添加sheet页
  let worksheet = workbook.addWorksheet(sheetName);
  // 设置sheet页列头和列宽
  let columns = columnArr.map((o, index) => {
    let columnSetting = {
      header: o.title,
      key: index.toString(),
      width: o.title.length > 4 ? o.title.length * 4 : o.title.length * 3 + 10
    }
    return columnSetting;
  });
  worksheet.columns = columns;
  // 给sheet页添加导出数据
  worksheet.addRows(exportDataArr);
  // 表头加粗
  worksheet.getRow(1).font = { bold: true };
  // 导出文件
  workbook.xlsx.writeBuffer().then(data => {
    const blob = new Blob([data], { type: blobType }); 
    FileSaver.saveAs(blob, 'Excel.xlsx');
  });
}

/**
 * 响应式数据转换为普通数据
 * @param data 可以是ref数据，也可以是reactive数据
 * @returns 返回普通数据
 */
export const ReactiveDataToRaw = (data) => {
    if (isRef(data)) {
        let resData = unref(data);
        if(isReactive(resData)) {
            return toRaw(resData);
        }
        return resData;
    } else if (isReactive(data)){
        return toRaw(data);
    }
    return data;
}