c# - Angular 5中的excel上传

Question

我正在尝试使用以下代码将数据导出到 angular 5 中。 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>

首先，安装 this file-saver使用 npm i angular-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