New features of Angular15
The Angular framework (hereinafter referred to as "Angular") is a web application framework developed by Google. Its powerful dependency injection system, reusable modular development concept and responsive programming mode have made Angular an instant success. Huge attention and traffic. So far, Angular has iterated 15 versions, and what are the new highlights of Angular15? The editor briefly introduces several new features of Angular 15 (the following features are from the official website of Angular):
- Standalone API out of developer preview
The Angular 14 release uses a separate API that enables developers to build applications without using NgModules. These APIs have been updated to a stable version in Angular 15, and the development of independent APIs will be controlled through semantic versioning in the future.
- MDC-based components released to stable
Angular15 optimizes the refactoring of components based on Angular material in Material Design Components for Web (MDC), which makes Angular closer to the specification of Material Design. For most components, Angular updates the styles and DOM structure. For new components, Angular keeps part of the TypeScript API and component/directive selectors.
-
Auto-import in Language Services
In Angular15, groups used in templates but not added to NgModule can be automatically imported
components or individual components.
Now that Angular has been upgraded, can we try some new ways to play? Want to integrate a report in Angular15 but don't know how to do it?
It doesn't matter, I will tell you today.
Introduce report plug-in in Angular15
Everyone knows that Excel, as an office software for statistics and analysis of data information, plays a very important role in our daily work and life. Traditional reports need to be downloaded from the browser and then opened with Excel to modify the data. So, is there a plug-in that can directly modify the Excel report data in the browser? The answer is yes.
The following will introduce how to integrate the Excel report plug-in in Angular15 and realize simple file upload and download.
In this tutorial we will be using node.js, make sure you have the latest version installed. In addition, you need to use the software Visual Studio Code (hereinafter referred to as "VSCode") as a programming environment, please run it as an administrator.
- Angular integrated report plugin:
Create a new folder to store the workspace code (the folder path is preferably in English).
Initialize the Angular project using the command (enter the command with the command prompt CMD).
//Install Angular CLI globally
npm install -g @angular/cli
//Create a new project via Angular CLI
ng new spread-sheets-app
(Initialize an Angular project)
Paste the following table resources into the dependencies tag in the package.json file, and use the npm install command to download and the ng serve command to run.
"@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"
(Introduce table plug-in resources into Angular project)
Instantiate the table component and initialize the table object content.
Initialize the instance form in src/app/app.component.html:
\<div class='maincontainer'\>
\<gc-spread-sheets [backColor]="spreadBackColor" [hostStyle]="hostStyle" (workbookInitialized)="workbookInit(\$event)"\>
\</gc-spread-sheets\>
\</div\>
(initialize instance table)
Set the size and content of the table in src/app/app.component.ts:
//Set content length width format
export class AppComponent {
spreadBackColor = 'aliceblue';
hostStyle = {
width: '95vw',
height: '80vh'
};
private spread;
private excelIO;
//创建Excel.IO对象
constructor() {
this.spread = new GC.Spread.Sheets.Workbook();
this.excelIO = new Excel.IO();
}
//初始化对象
workbookInit(args: any) {
//表格对象内容
//举例：设置第一个表格的内容为“Test Excel”且背景颜色为蓝色。
//const self = this;
// self.spread = args.spread;
// const sheet = self.spread.getActiveSheet();
// sheet.getCell(0, 0).text('Test Excel').foreColor('blue');
}
（设
to configure table size and content)
2. Set upload and download buttons.
Initialize the upload and download buttons in 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);
});
}
(How to add upload and download buttons)
Now you can use the ng serve command to start the project and test uploading files, modifying file content, and downloading files in the browser.
(system effect display diagram)
Code address :
https://gitee.com/GrapeCity/angular （Gitee）
https://github.com/GrapeCityXA/Angular-SpreadJS ( Github ) More information about the front-end form plugin
Extension link:
The battle of front-end framework丨Who else is competing with Vue, Angular and React?