在 Angular 中將資料匯出到 Excel

Rana Hasnain Khan 2022年6月2日
在 Angular 中將資料匯出到 Excel

本文將討論如何在 Angular 中將資料匯出到 Excel。

在 Angular 中將資料匯出到 Excel

在很多情況下,我們可能需要在 Angular 應用程式中使用匯出功能。我們可能希望在我們的應用程式上提供一個選項作為按鈕,供客戶或客戶將資料從表格匯出到 Excel 工作表或從 JSON 匯出到 Excel 工作表。

本教程將通過示例討論將資料從我們的應用程式匯出為 Excel 格式。為此,我們可以使用 Angular 中的 xlsx 庫,它為我們提供了將 JSON 資料轉換為 Excel 格式的選項。

讓我們通過一個示例來建立一年中天氣季節的 JSON 資料。我們必須首先在我們的系統中安裝 Angular CLI。

首先,我們將通過在命令列中執行以下命令在 Angular 上建立一個新專案。

ng new angular-app

一旦我們的新應用程式成功建立,我們將在以下命令的幫助下轉到我們的應用程式資料夾。

cd ./angular-app

我們將使用 npm 模組安裝 xlsx 庫。我們將使用以下命令來安裝它。

npm i xlsx --save

現在我們將建立一個一年中天氣季節的虛擬列表。在此示例中,我們建立了我們的虛擬 JSON 資料,但它可以通過資料庫或某些 API 獲取。

虛擬資料如下所示。

Seasons = [
{ 	"id": 1,
	"name": "Spring",
	"Fruit": "Orange" },
{	"id": 2,
	"name": "Summer",
	"Fruit": "Mango"},
{	"id": 3,
	"name": "Winter",
	"Fruit": "Apple"},
{	"id": 4,
	"name": "Autumn",
	"Fruit": "Banana"}]

現在,我們將建立前端應用程式,我們將在其中建立將顯示 JSON 資料的表。app.component.html 檔案中的更新程式碼如下所示。

<div>
  <button (click)="exportToExcel()">Export to Excel</button>
  <table id="season-tble">
    <tr>
      <th>Id</th>
      <th>name</th>
      <th>Fruit</th>
    </tr>
    <tr *ngFor="let season of Seasons">
      <td>{{ season.id }}</td>
      <td>{{ season.name }}</td>
      <td>{{ season.fruit }}</td>
    </tr>
  </table>
</div>

現在我們將在 app.component.ts 檔案中建立一個函式來將資料匯出為 Excel 格式,如下所示。

import { Component, VERSION } from '@angular/core';
import * as XLSX from 'xlsx';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  Seasons = [
    { id: 1, name: 'Spring', fruit: 'Orange' },
    { id: 2, name: 'Summer', fruit: 'Mango' },
    { id: 3, name: 'Winter', fruit: 'Apple' },
    { id: 4, name: 'Autumn', fruit: 'Banana' },
  ];

  name = 'ExcelSheet.xlsx';
  exportToExcel(): void {
    let element = document.getElementById('season-tble');
    const worksheet: XLSX.WorkSheet = XLSX.utils.table_to_sheet(element);

    const book: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(book, worksheet, 'Sheet1');

    XLSX.writeFile(book, this.name);
  }
}

如下所示,我們將新增一些 CSS 程式碼來讓我們的前端看起來不錯。

td{
  border: 1px solid black;
  padding: 10px;
}
button{
  background: black;
  padding: 10px;
  color: white;
  margin-bottom: 50px;
}

現在,我們將使用如下所示的命令執行應用程式。

npm start

輸出:

在 Angular 中匯出到 excel 前端

現在讓我們點選 export 按鈕並檢查程式是否正常工作。當我們點選該按鈕時,它會下載我們儲存的名稱的檔案,如下圖所示。

在 angular 中匯出到 excel

現在,讓我們開啟這個檔案並檢查它的外觀,如下所示。

在 Angular 中匯出為 excel 資料

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn