在之前的文章中，我們?yōu)榇蠹以敿毥榻B了如何在JavaScript、React中使用SpreadJS導入和導出Excel文件的方法（點擊這里回顧>>）,本文我們將為大家介紹該問題在Angular中的實現(xiàn)。

獲取SpreadJS最新正式版下載

Excel 電子表格自 1980 年代以來一直為各行業(yè)所廣泛使用，至今已擁有超過3億用戶，大多數(shù)人都熟悉 Excel 電子表格體驗。許多企業(yè)在其業(yè)務的各個環(huán)節(jié)中使用了 Excel 電子表格進行預算和規(guī)劃。

通常情況下，剛開始時我們的業(yè)務流程中的數(shù)據(jù)簡單，也不涉及復雜的格式和數(shù)據(jù)關系。但隨著組織的發(fā)展，可能很難不開始依賴 Excel 的功能。

在應用程序中使用SpreadJS的好處

SpreadJS可以為我們的Web應用提供更好的交互體驗，以及更靈活的權限控制、數(shù)據(jù)整合、數(shù)據(jù)可視化、戰(zhàn)略績效測量 (SPM)、復雜的統(tǒng)計分析等。多年來，Excel 兼容性一直是SpreadJS最重要的功能之一。

SpreadJS 提供了熟悉的 Excel 電子表格界面。用戶可以通過SpreadJS直接在頁面端導入和導出 Excel 文件，甚至可以在網(wǎng)頁上構建企業(yè)的績效和業(yè)務儀表板——這一切無需依賴 Excel。

本文演示了如何在 Angular 環(huán)境中使用 SpreadJS 導入和導出 Excel 電子表格。

以下是在 Angular 中導入和導出 Excel 電子表格的步驟：

在應用程序中安裝SpreadJS組件

應該注意的是，由于我們使用的是 Angular CLI，我們需要確保它與 NPM 一起安裝：

npm install -g @angular/cli

由于我們將使用 SpreadJS 的 Excel 導入和導出功能，因此我們需要 ExcelIO 組件。你可以使用 NPM 安裝它和基本的 SpreadJS 文件：

npm install @grapecity/spread-sheets @grapecity/spread-excelio @grapecity/spread-sheets-angular

實例化SpreadJS組件

SpreadJS可以添加到app.component.html 頁面，如下所示：

<gc-spread-sheets [backColor]=”spreadBackColor” [hostStyle]="hostStyle" (workbookInitialized)="workbookInit($event)">
</gc-spread-sheets>

實例化 SpreadJS 組件并在 app.component.ts 文件中創(chuàng)建 ExcelIO 類的對象，代碼如下：

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
spreadBackColor = 'aliceblue';
hostStyle = {
width: '95vw',
height: '80vh'
};
private spread;
private excelIO;

constructor() {
this.spread = new GC.Spread.Sheets.Workbook();
this.excelIO = new Excel.IO();
}

workbookInit(args: any) {
const self = this;
self.spread = args.spread;
const sheet = self.spread.getActiveSheet();
sheet.getCell(0, 0).text('Test Excel').foreColor('blue');
sheet.getCell(1, 0).text('Test Excel').foreColor('blue');
sheet.getCell(2, 0).text('Test Excel').foreColor('blue');
sheet.getCell(3, 0).text('Test Excel').foreColor('blue');
sheet.getCell(0, 1).text('Test Excel').foreColor('blue');
sheet.getCell(1, 1).text('Test Excel').foreColor('blue');
sheet.getCell(2, 1).text('Test Excel').foreColor('blue');
sheet.getCell(3, 1).text('Test Excel').foreColor('blue');
sheet.getCell(0, 2).text('Test Excel').foreColor('blue');
sheet.getCell(1, 2).text('Test Excel').foreColor('blue');
sheet.getCell(2, 2).text('Test Excel').foreColor('blue');
sheet.getCell(3, 2).text('Test Excel').foreColor('blue');
sheet.getCell(0, 3).text('Test Excel').foreColor('blue');
sheet.getCell(1, 3).text('Test Excel').foreColor('blue');
sheet.getCell(2, 3).text('Test Excel').foreColor('blue');
sheet.getCell(3, 3).text('Test Excel').foreColor('blue');
}

創(chuàng)建一個接受 XLSX 文件的輸入元素

對于導入，我們將創(chuàng)建一個接受 XLSX 文件的輸入元素。讓我們在 app.component.html 中添加以下代碼：

<div class='loadExcelInput'>
<p>Open Excel File</p>
<input type="file" name="files[]" multiple id="jsonFile" accept=".xlsx" (change)="onFileChange($event)" />
</div>

添加導入代碼

ExcelIO 對象打開所選文件并以 相應格式返回結果。這個 數(shù)據(jù)可以被 SpreadJS 直接理解，所以我們將在 onFileChange() 函數(shù)中為 change 事件編寫導入代碼。

添加導出代碼

同樣，讓我們添加一個按鈕來處理導出功能。要添加導出按鈕，我們可以使用：

<div class='exportExcel'>
<p>Save Excel File</p>
<button (click)="onClickMe($event)">Save Excel!</button>
</div>

我們還需要處理這個按鈕的點擊事件并在那里編寫我們的代碼。 ExcelIO 可將其保存為 BLOB，稍后需要將此 blob 數(shù)據(jù)傳遞給文件保護程序組件的 saveAs() 函數(shù)。

應該注意的是，我們使用了文件保護程序組件來實現(xiàn)導出功能。要在你的項目中包含文件保護程序，請按照以下步驟操作：

1. 運行“npm install file-saver –save”命令
2. 運行“npm install \@types/file-saver –save-dev”命令
3. 將此第三方庫添加到“.angular”

"scripts": ["./node_modules/file-saver/FileSaver.js"]**

1. 導入組件

import {saveAs} from 'file-saver';

現(xiàn)在已經(jīng)可以在 Angular 中使用 SpreadJS 成功導入和導出 Excel 文件了。

本文內(nèi)容源自