excel 上传 Angular 5

Question

我正在尝试使用以下代码将数据导出到 angular 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 and file-saver 库导出 excel 文件中的 table 数据。

在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' });
    }

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

excel 上传 Angular 5

excel upload in Angular 5

c#

angular5