在Angular 4上导出到Excel

问题描述 投票:12回答:4

我有一个使用Angular 4动态填充的数据表。我想将表导出到excel。我如何在Angular 4中实现这一点。我正在寻找.xls而不是.csv。

PS:我不想使用Jquery库。

我的app-component看起来像这样,

    <table id ="dataTable" class = "table table-hover">
  <thead>
      <tr>
          <th>Date</th>
          <th>Address</th>
          <th>Mode</th>
          <th>Distance</th>
          <th>Fare</th>
          <th></th>
      </tr>
  </thead>
  <tbody>
      <tr *ngFor="let date of dateList;let i = index">
          <td>{{date}}</td> 
          <td>{{address}}</td>
          <td>{{mode}}</td>
          <td>{{distance}}</td>
          <td>{{fare}}</td>
          <td>
             <a>Delete</a>
          </td>   
      </tr>
  </tbody>
</table>

感谢您的帮助

excel angular
4个回答
9
投票

您可以使用XLSX导出到Excel。

它将支持json或数组到excel。

示例代码

import * as XLSX from 'xlsx';

public exportAsExcelFile(json: any[], excelFileName: string): void {
  const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
  const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
  const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'buffer' });
  this.saveAsExcelFile(excelBuffer, excelFileName);
}

保存

private saveAsExcelFile(buffer: any, fileName: string): void {
  const data: Blob = new Blob([buffer], {
    type: EXCEL_TYPE
  });
  const today = new Date();
  const date = today.getFullYear() + '' + (today.getMonth() + 1) + '' + today.getDate() + '_';
  const time = today.getHours() + "-" + today.getMinutes() + "-" + today.getSeconds();
  const name = fileName + date + time;
  FileSaver.saveAs(data, name + EXCEL_EXTENSION);
}

参考Angular 2+

Xlsx for angular 2+


7
投票

对于那些仍在寻找工作答案的人。

public export() {
    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(this.myDataModels);
    /* generate workbook and add the worksheet */
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, worksheet, 'Sheet1');
    /* save to file */
    XLSX.writeFile(wb, this.createFileName());
}

这将自动保存为xlsx文件来自https://github.com/SheetJS/js-xlsx/tree/19620da30be2a7d7b9801938a0b9b1fd3c4c4b00/demos/angular2


1
投票

您只能使用xlsx同时使用XLSX.writeFile()库来编写和保存excel文件

exportExcel(data: any[]){
   const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(data);
   const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
   XLSX.writeFile(workbook, 'my_file.xls', { bookType: 'xls', type: 'buffer' });
}

0
投票

似乎microsoft提供了一个Javascript插件,可以与Angular,here一起使用

© www.soinside.com 2019 - 2024. All rights reserved.