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

獲取SpreadJS最新正式版下載

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

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

在應(yīng)用程序中使用SpreadJS的好處

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

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

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

以下是在 Angular 中導(dǎo)入和導(dǎo)出 Excel 電子表格的步驟：

在應(yīng)用程序中安裝SpreadJS組件

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

npm install -g @angular/cli

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

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

實(shí)例化SpreadJS組件

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

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

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

@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)建一個(gè)接受 XLSX 文件的輸入元素

對(duì)于導(dǎo)入，我們將創(chuàng)建一個(gè)接受 XLSX 文件的輸入元素。讓我們?cè)?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>

添加導(dǎo)入代碼

ExcelIO 對(duì)象打開(kāi)所選文件并以 相應(yīng)格式返回結(jié)果。這個(gè) 數(shù)據(jù)可以被 SpreadJS 直接理解，所以我們將在 onFileChange() 函數(shù)中為 change 事件編寫(xiě)導(dǎo)入代碼。

添加導(dǎo)出代碼

同樣，讓我們添加一個(gè)按鈕來(lái)處理導(dǎo)出功能。要添加導(dǎo)出按鈕，我們可以使用：

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

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

應(yīng)該注意的是，我們使用了文件保護(hù)程序組件來(lái)實(shí)現(xiàn)導(dǎo)出功能。要在你的項(xiàng)目中包含文件保護(hù)程序，請(qǐng)按照以下步驟操作：

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

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

1. 導(dǎo)入組件

import {saveAs} from 'file-saver';

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

本文內(nèi)容源自