excel在Angular 5中上传

Question

我正在尝试通过使用以下代码将数据导出到角度5中的excel。 Excel下载成功。但是excel中的数据显示如下：

downloadReport(data:any){
        let blob = new Blob([data], {  type:'text/html' });
        let url= window.URL.createObjectURL(blob);
        var a = document.createElement("a");
        document.body.appendChild(a);
        a.href = url;
        a.download = "newfile.xls";
        a.click();
        // window.open(url);
    }

Answer 1

您可以使用Blob和file-saver库将表格数据导出到excel文件中。

在HTML中：

<table id="exportable" *ngIf="data.length != 0" cellpadding="1" cellspacing="1" class="table table-bordered table-striped">
      <thead>
          <tr>
              <th>Name</th>
              <th>Username</th>
          </tr>
      </thead>
      <tbody>
          <tr *ngFor="let report of data">
              <td>{{report.name }}</td>
              <td>{{report.userName}}</td>
          </tr>
      </tbody>
  </table>
  <button mat-button (click)="exportToExcel()">Download Excel</button>

首先，使用npm i angular-file-saver安装this file-saver NPM软件包

在TS中：

import { saveAs } from 'file-saver'; /* import */

和功能：

exportToExcel() {
    var blob = new Blob([document.getElementById("exportable").innerText], {
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
    });
    var fileName = 'Test.xls';
    saveAs(blob, fileName);
  }

StackBlitz Example

Answer 2

您可以在Typescript中创建一个函数，并在调用API进行数据提取后调用该函数

功能如下：-

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

不要在按钮上调用此函数，请单击调用该函数，该函数将从您导出到excel按钮的API中获取数据