Angular+FileSaver實現導出(xlsx或ExcelJS)

1、安裝相關插件

npm install file-saver --save
npm install @types/file-saver --save-dev

一、xlsx(雖然強大，但是默認不支持改變樣式，想要支持改變樣式，需要使用它的收費版本。)

1、安裝

npm install xlsx --save

2、寫一個導出的service供使用

import { Injectable } from '@angular/core';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';
@Injectable({
  providedIn: 'root'
})
export class Export {

  /**
   *  將Json數據導出為Excel文件
   * @param json_data 數據內容
   * @param excelName 文件名稱
   * @param header 表頭(可選)
   */
  downloadExcel(json_data: any, excelName: string,header?: string[]) {

    const ws = XLSX.utils.json_to_sheet(
      json_data, {
      header: header //設置表頭
    }
    )
    //創建一個workbook對象
    let wb = XLSX.utils.book_new()
    //把worksheet對象添加進workbook對象，第三個參數是excel中sheet的名字
    XLSX.utils.book_append_sheet(wb, ws, excelName)
    //接下來就是寫入，下載導出
    let wb_out = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
    FileSaver.saveAs(new Blob([wb_out], { type: 'application/octet-stream' }), excelName + '.xlsx')
  }
  /**
   *  將表格導出為Excel文件
   * @param table 表格內容
   * @param fileName 文件名稱
   */
  exportExcelByTable(table: any,  fileName: string) {
    const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(table);
    const workbook: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, ws, 'ClassDataExport');
    const excelBuffer: any = XLSX.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, fileName+ '.xlsx');
  }
}

 

注：

 

在typescript中，可能會碰到元素隱式具有“any”類型，因為“string”類型的表達式不能用於索引類型“Object”。在類型“Object”上找不到“string”類型參數的索引簽名問題。

 

要想解決這類問題，需要在tsconfig.json文件中配置："suppressImplicitAnyIndexErrors": true 就可以解決此類問題。

 

二、ExcelJS(導出同時自適應寬高、設置字體、單元格格式)

1、安裝

npm install exceljs

2、調整導出service，import { Workbook } from 'exceljs';

 downloadExcel(fileName: string, exportColumn: [] , exportData: any) {
    if (exportData) {
      let wb=new Workbook();
      let sheet=wb.addWorksheet('sheet');
      //設置表頭行
      let title=exportColumn.map((item:any)=>{
        return item.title;
      });
      sheet.addRow(title);
      exportData.map((data: any) => {
       let temp: any[] = [];
       exportColumn.map((item: any) => {
         temp.push(data[item.name]) ;
       })
       sheet.addRow(temp);
     })
     //修改字體、對齊方式
     sheet.eachRow(row=>{
       row.font={
        size: 10,
        name: 'Arial',
        bold:true
      };
      row.alignment = {vertical: 'middle', horizontal: 'center', wrapText: false,};
    })
    //自適應寬度、設置單元格格式

　　　sheet.columns.forEach((column:any, i)=> {

      let maxLength = 0;

      column["eachCell"]({ includeEmpty: true },  (cell: any) => {

 　　　　if(!cell.value.isNaN&&typeof(cell.value)==='number'){

          cell.numFmt='0';

        }

          let columnLength =this.getCellWidth(cell.value);

          if (columnLength > maxLength ) {

              maxLength = columnLength;

          }

      });

      column.width = maxLength < 10 ? 10 : maxLength;

    });

     wb.xlsx.writeBuffer().then((data)=>{
       const blob: Blob = new Blob([data], {
         type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
       });
       FileSaver.saveAs(blob, fileName+ '.xlsx');
     })
 
     }
  }

 getCellWidth(value:any){

    if(!value){

      return 10;

    }

    else if(value.toString().charCodeAt() > 255){

      return value.toString().length*2.1

    }

    else{

      return value.toString().length*1.1

    }

  }

 注：安裝exceljs后調試項目，可能出現Angular : Can't export excel using ExcelJS - error TS2307: Cannot find module 'stream' - error TS2503: Cannot find namespace 'NodeJS'錯誤，這時需要修改tsconfig.app.json文件

 

 

 tsconfig.spec.json測試文件同理