摘要：本文由葡萄城技術(shù)團(tuán)隊(duì)于博客園原創(chuàng)并首發(fā)。葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務(wù)，賦能開發(fā)者。
Angular15新特性
Angular框架（以下簡(jiǎn)稱“Angular”）作為一款由谷歌開發(fā)的Web應(yīng)用程序框架，其強(qiáng)大的依賴注入系統(tǒng)、可重復(fù)使用的模塊化開發(fā)理念和響應(yīng)式編程模式等特點(diǎn)讓Angular一問世便取得了巨大的關(guān)注和流量。 截止目前為止，Angular已經(jīng)迭代了15個(gè)版本，而Angular15又有哪些新的亮眼表現(xiàn)呢？小編為大家簡(jiǎn)單介紹幾個(gè)Angular15的新特性（以下特性源于Angular官網(wǎng)）：
- 獨(dú)立API脫離開發(fā)者預(yù)覽版
在Angular14版本的更新中使用了獨(dú)立的API，使得開發(fā)者能夠在不使用 NgModules 的情況下構(gòu)建應(yīng)用程序。在Angular15中將這些API已經(jīng)更新成為了穩(wěn)定版，并且以后將通過語(yǔ)義版本去控制獨(dú)立 APIs 的發(fā)展。
- 基于MDC的組件發(fā)布到穩(wěn)定版
Angular15優(yōu)化了基于Material Design Components for Web（MDC）中Angular material對(duì)于組件的重構(gòu)，這樣使得 Angular更加接近Material Design的規(guī)范。對(duì)于大部分組件，Angular更新了樣式和DOM結(jié)構(gòu)。對(duì)于新組件，Angular保留了一部分TypeScript API和組件/指令選擇器。
-
語(yǔ)言服務(wù)中的自動(dòng)導(dǎo)入
在Angular15中，可以自動(dòng)導(dǎo)入在模板中使用但是沒有添加到NgModule中的組
件或獨(dú)立組件。
既然Angular都升級(jí)了，咱們是不是可以嘗試一些新的玩法？想要在Angular15中整合一個(gè)報(bào)表，但不知道該怎么做？
沒關(guān)系，今天小編來(lái)告訴你。
Angular15中引入報(bào)表插件
大家都知道Excel作為一款統(tǒng)計(jì)、分析數(shù)據(jù)信息的辦公軟件，在大家日常工作和生活中起到了非常重要的作用。傳統(tǒng)的報(bào)表需要從瀏覽器下載之后再用Excel打開才能修改數(shù)據(jù)，那么，有沒有一種插件可以實(shí)現(xiàn)直接在瀏覽器中修改Excel報(bào)表數(shù)據(jù)呢？答案是肯定的。
下面將介紹如何在Angular15中集成Excel報(bào)表插件并實(shí)現(xiàn)簡(jiǎn)單的文件上傳和下載。
在本教程中，我們將使用node.js，請(qǐng)確保已安裝最新版本。除此之外還需要使用軟件Visual Studio Code(以下簡(jiǎn)稱“VSCode”)作為編程環(huán)境，請(qǐng)您以管理員身份運(yùn)行它。
- Angular集成報(bào)表插件:
新建一個(gè)文件夾用來(lái)存放工作區(qū)代碼（文件夾路徑最好是英文）。
使用指令初始化Angular工程（用命令提示符CMD輸入指令）。
//安裝 Angular CLI globally
npm install -g @angular/cli
//通過Angular CLI 創(chuàng)建一個(gè)新項(xiàng)目
ng new spread-sheets-app
（初始化一個(gè)Angular工程）
將下面的表格資源粘貼到package.json文件中的dependencies標(biāo)簽，并使用npm install指令下載和ng serve指令運(yùn)行。
"@angular/animations": "\^15.2.9",
"@angular/common": "\^15.2.9",
"@angular/compiler": "\^15.2.9",
"@angular/core": "\^15.2.9",
"@angular/forms": "\^15.2.9",
"@angular/platform-browser": "\^15.2.9",
"@angular/platform-browser-dynamic": "\^15.2.9",
"@grapecity/spread-sheets-resources-zh": "15.1.0",
"@angular/router": "\^15.2.9",
"@grapecity/spread-excelio": "\^15.2.5",
"@grapecity/spread-sheets": "\^15.2.5",
"@grapecity/spread-sheets-angular": "\^15.2.5",
"@grapecity/spread-sheets-charts": "\^15.1.1",
"@grapecity/spread-sheets-designer": "15.1.2",
"@grapecity/spread-sheets-designer-resources-cn": "15.1.2",
"@grapecity/spread-sheets-designer-angular": "15.1.2",
"file-saver": "\^2.0.5",
"rxjs": "\~7.5.0",
"tslib": "\^2.3.0",
"zone.js": "\~0.11.4"
（Angular工程中引入表格插件資源）
實(shí)例化表格組件并初始化表格對(duì)象內(nèi)容。
在src/app/app.component.html中初始化實(shí)例表格：
\<div class='maincontainer'\>
\<gc-spread-sheets [backColor]="spreadBackColor" [hostStyle]="hostStyle" (workbookInitialized)="workbookInit(\$event)"\>
\</gc-spread-sheets\>
\</div\>
（初始化實(shí)例表格）
在src/app/app.component.ts中設(shè)置表格的大小和內(nèi)容：
//設(shè)置內(nèi)容長(zhǎng)度寬度格式
export class AppComponent {
spreadBackColor = 'aliceblue';
hostStyle = {
width: '95vw',
height: '80vh'
};
private spread;
private excelIO;
//創(chuàng)建Excel.IO對(duì)象
constructor() {
this.spread = new GC.Spread.Sheets.Workbook();
this.excelIO = new Excel.IO();
}
//初始化對(duì)象
workbookInit(args: any) {
//表格對(duì)象內(nèi)容
//舉例：設(shè)置第一個(gè)表格的內(nèi)容為“Test Excel”且背景顏色為藍(lán)色。
//const self = this;
// self.spread = args.spread;
// const sheet = self.spread.getActiveSheet();
// sheet.getCell(0, 0).text('Test Excel').foreColor('blue');
}
（設(shè)
置表格大小和內(nèi)容）
2.設(shè)置上傳和下載按鈕。
在src/app/app.component.html中初始化上傳、下載按鈕：
\<div class='maincontainer'\>
\<!--初始化上傳按鈕--\>
\<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\>
（初始化上傳、下載按鈕）
在src/app/app.component.ts中添加上傳、下載按鈕的方法：
//上傳文件代碼
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: any) =\> {
self.spread.fromJSON(json, {});
setTimeout(() =\> {
alert('load successfully');
}, 0);
}, (error: any) =\> {
alert('load fail');
});
}
}
//下載文件代碼
onClickMe(args: any) {
const self = this;
const filename = 'exportExcel.xlsx';
const json = JSON.stringify(self.spread.toJSON());
self.excelIO.save(json, function (blob: any) {
saveAs(blob, filename);
}, function (error: any) {
console.log(error);
});
}
（添加上傳、下載按鈕的方法）
現(xiàn)在可以使用ng serve指令啟動(dòng)項(xiàng)目并在瀏覽器中測(cè)試上傳文件、修改文件內(nèi)容和下載文件的操作了。
代碼地址：
https://gitee.com/GrapeCity/angular （Gitee）
https://github.com/GrapeCityXA/Angular-SpreadJS (Github)
更多關(guān)于前端表格插件的資料文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-472823.html
擴(kuò)展鏈接：
SpreadJS在服務(wù)器端導(dǎo)入導(dǎo)出Excel
將C1Chart導(dǎo)出到Excel文件
SpreadJS導(dǎo)入導(dǎo)出到Excel:使用Excel Import和Export Service文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-472823.html
到了這里，關(guān)于看看Angular有啥新玩法！手把手教你在Angular15中集成報(bào)表插件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
