Excel IO 元素
使用SpreadJS中的Excel IO元素和Angular，您可以在网页上快速呈现和显示Excel工作表，同时执行导入和导出操作，而无需任何麻烦。
全局安装Angular CLI
打开命令提示窗口并键入以下命令：
npm install -g @angular/cli使用Angular CLI创建新项目
使用以下命令创建新项目并导航到项目目录：
ng new spread-sheets-angular-cli
cd spread-sheets-angular-cli安装SpreadJS Npm软件包
使用以下命令安装SpreadJS Npm软件包：
npm install @grapecity/spread-sheets
npm install @grapecity/spread-sheets-angular在项目中安装Excel IO Angular Module和FileSaver Angular Module
使用以下命令在项目中安装Excel I/O和文件保护程序模块：
npm install @grapecity/spread-excelio
npm install file-saver --save在angular.json中配置SpreadJS CSS
在angular.json中配置SpreadJS CSS，如下所示：
{
...
"projects":{
"spread-sheets-angular-cli":{
...
"architect":{
...
"build":{
...
options:{
...
"styles": [
"node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016darkGray.css"
],
...
}
...
}
...
}
...
}
}
...
}在Angular应用中使用Excel IO
修改app.module.ts以导入SpreadJS模块；如下图所示：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { SpreadSheetsModule } from "@grapecity/spread-sheets-angular";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule,SpreadSheetsModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }修改app.component.html以查看SpreadJS组件，如下所示：
<div class='maincontainer'>
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="workbookInit($event)">
</gc-spread-sheets>
<div class='loadExcelInput'>
<p>Open Excel File</p>
<input type="file" name="files[]" multiple id="jsonFile" accept=".xlsx" (change)="onFileChange($event)" />
</div>
<div class='exportExcel'>
<p>Save Excel File</p>
<button (click)="onClickMe($event)">Save Excel!</button>
</div>
</div>修改的app.component.ts；使用Excel IO元素并为SpreadJS组件准备数据；如下图所示：
import { Component, ViewChild } from '@angular/core';
import * as GC from '@grapecity/spread-sheets';
import * as Excel from '@grapecity/spread-excelio';
import { saveAs } from 'file-saver';
// LICENSE信息
var SpreadJSKey = "xxxx";
GC.Spread.Sheets.LicenseKey = SpreadJSKey;
// 还需要为EXCELIO设置license
(<any>Excel).LicenseKey = SpreadJSKey;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
spreadBackColor = 'aliceblue';
hostStyle = {
width: '95vw',
height: '80vh'
};
private spread!: GC.Spread.Sheets.Workbook;;
private excelIO;
constructor() {
this.excelIO = new Excel.IO();
}
workbookInit(args: { spread: GC.Spread.Sheets.Workbook; }) {
const self = this;
self.spread = args.spread;
const sheet = self.spread.getActiveSheet();
sheet.getCell(0, 0).text('Test ExcelIO').foreColor('blue');
}
onFileChange(args: any) {
const self = this, file = args.srcElement && args.srcElement.files && args.srcElement.files[0];
if (self.spread && file) {
self.excelIO.open(file, (json: Object) => {
self.spread.fromJSON(json, {});
setTimeout(() => {
alert('Excel loaded successfully');
}, 0);
}, (error: any) => {
alert('load fail');
});
}
}
onClickMe(args: any) {
const self = this;
const filename = 'ExportedExcel.xlsx';
const json = JSON.stringify(self.spread.toJSON());
self.excelIO.save(json, function (blob: any) {
saveAs(blob, filename);
}, function (e: any) {
console.log(e);
});
}
}使用Angular CLI构建并运行项目
使用以下命令生成并运行新项目：
ng serve