乐趣区

关于前端:看看Angular有啥新玩法手把手教你在Angular15中集成报表插件

jiezi

摘要：本文由葡萄城技术团队于 SegmentFault 原创并首发。转载请注明出处：葡萄城官网，葡萄城为开发者提供业余的开发工具、解决方案和服务，赋能开发者。

Angular15 新个性

Angular 框架（以下简称“Angular”）作为一款由谷歌开发的 Web 应用程序框架，其弱小的依赖注入零碎、可重复使用的模块化开发理念和响应式编程模式等特点让 Angular 一问世便获得了微小的关注和流量。截止目前为止，Angular 曾经迭代了 15 个版本，而 Angular15 又有哪些新的亮眼体现呢？小编为大家简略介绍几个 Angular15 的新个性（以下个性源于 Angular 官网）：

  1. 独立 API 脱离开发者预览版

在 Angular14 版本的更新中应用了独立的 API，使得开发者可能在不应用 NgModules 的状况下构建应用程序。在 Angular15 中将这些 API 曾经更新成为了稳定版，并且当前将通过语义版本去管制独立 APIs 的倒退。

  1. 基于 MDC 的组件公布到稳定版

Angular15 优化了基于 Material Design Components for Web（MDC）中 Angular material 对于组件的重构，这样使得 Angular 更加靠近 Material Design 的标准。对于大部分组件，Angular 更新了款式和 DOM 构造。对于新组件，Angular 保留了一部分 TypeScript API 和组件 / 指令选择器。

  1. 语言服务中的主动导入

    在 Angular15 中，能够主动导入在模板中应用然而没有增加到 NgModule 中的组

件或独立组件。

既然 Angular 都降级了，咱们是不是能够尝试一些新的玩法？想要在 Angular15 中整合一个报表，但不晓得该怎么做？

没关系，明天小编来通知你。

Angular15 中引入报表插件

大家都晓得 Excel 作为一款统计、剖析数据信息的办公软件，在大家日常工作和生存中起到了十分重要的作用。传统的报表须要从浏览器下载之后再用 Excel 关上能力批改数据，那么，有没有一种插件能够实现间接在浏览器中批改 Excel 报表数据呢？答案是必定的。

上面将介绍如何在 Angular15 中集成 Excel 报表插件并实现简略的文件上传和下载。

在本教程中，咱们将应用 node.js，请确保已装置最新版本。除此之外还须要应用软件 Visual Studio Code(以下简称“VSCode”) 作为编程环境，请您以管理员身份运行它。

  1. Angular 集成报表插件:

新建一个文件夹用来寄存工作区代码（文件夹门路最好是英文）。

应用指令初始化 Angular 工程（用命令提示符 CMD 输出指令）。

// 装置 Angular CLI globally

npm install -g @angular/cli

// 通过 Angular CLI 创立一个新我的项目 

ng new spread-sheets-app

（初始化一个 Angular 工程）

将上面的表格资源粘贴到 package.json 文件中的 dependencies 标签，并应用 npm install 指令下载和 ng serve 指令运行。

"@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 工程中引入表格插件资源）

实例化表格组件并初始化表格对象内容。

在 src/app/app.component.html 中初始化实例表格：

\<div class='maincontainer'\>

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

\</gc-spread-sheets\>

\</div\>

（初始化实例表格）

在 src/app/app.component.ts 中设置表格的大小和内容：

// 设置内容长度宽度格局 

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');

}（设

置表格大小和内容）

2. 设置上传和下载按钮。

在 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);

});

}

（增加上传、下载按钮的办法）

当初能够应用 ng serve 指令启动我的项目并在浏览器中测试上传文件、批改文件内容和下载文件的操作了。

（零碎成果展现图）

代码地址 ：

https://gitee.com/GrapeCity/angular（Gitee）

https://github.com/GrapeCityXA/Angular-SpreadJS (Github)

扩大链接：

前端框架之争丨除了 Vue、Angular 和 React 还有谁与之争锋

Angular 性能优化实际——巧用第三方组件和懒加载技术

如何在 Angular CLI 上应用 SpreadJS

退出移动版