Excel загрузить в Angular 5

Question

Я пытаюсь экспортировать данные в Excel 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

Вы можете создать функцию в 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

Answer 2

Вы можете использовать библиотеки 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, используя npm i angular-file-saver

И в 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