首页 > 解决方案 > 无法使用带有角度8的xlsx的json数据导出到excel

问题描述

我无法使用 angular 8 将对象数组导出到带有xlsx 库的 excel 工作表。这是我将 json 数据导出到具有多个工作表的 excel 的示例代码。

在我的 app.html 文件中。

<button (click)="exportAsXLSX()" >Export to Excel </button>

在我的 app.ts 文件中。

  public exportAsXLSX():void {
    let myExcelData = {teams: [{name: 'chelsea', matchsAvailable: 10},
                           {name: 'manu', matchsAvailable: 10},
                          {name: 'spurs', matchsAvailable: 10}, 
                          {name: 'arsenal', matchsAvailable: 10}],
                   Managers: [{team: 'chelsea', name: 'lampard'},
                              {team: 'manu', name: 'ole'}, 
                              {team: 'spurs', name: 'jose'}, 
                             {team: 'arsenal', name: 'wenger'},]}
    this.exportToExcelService.exportAsExcelFile(myExcelData , 'intelligence');
}

在我的 service.ts 里面

import { Injectable } from '@angular/core';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';
const EXCEL_EXTENSION = '.xlsx';
const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';

@Injectable({
  providedIn: 'root'
})
export class ExportToExcelService {
  constructor() { }
  public exportAsExcelFile(json: any[], excelFileName: string): void {
    
    const worksheetForTeam: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json['teams']);
    const worksheetForManagers: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json['Managers']);
    const workbook: XLSX.WorkBook = { Sheets: { 'Sheet1': worksheetForTeam 'Sheet2': worksheetForManagers}, SheetNames: ['ByTheTeam', 'ByTheManagers'] };
    const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    this.saveAsExcelFile(excelBuffer, excelFileName);
  }
  private saveAsExcelFile(buffer: any, fileName: string): void {
    const data: Blob = new Blob([buffer], {
      type: EXCEL_TYPE
    });
    FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
  }
}

如果我为单张纸执行这些操作,则它不适用于多张纸。我可以下载带有工作表的 excel 文件。但是工作表是空的,里面没有任何数据。

任何我犯错误的见解都会非常有帮助。先感谢您。

标签: angulartypescriptangular8xlsxexceljs

解决方案


 const workbook: XLSX.WorkBook = { Sheets: { 'ByTheTeam': worksheetForTeam 'ByTheManagers': worksheetForManagers}, SheetNames: ['ByTheTeam', 'ByTheManagers'] };

更改工作表名称对我有用。简单的菜鸟错误。


推荐阅读