前端必读榜——如何在Angular中用SpreadJS导入/导出Excel文件

转帖|行业资讯|编辑:龚雪|2022-11-28 10:32:10.463|阅读 37 次

概述:本文将为大家介绍如何在Angular中使用SpreadJS直接在页面端导入和导出 Excel 文件,欢迎下载相关组件体验~

# 31款JAVA开发必备控件和工具 # 界面/文档管理/报表/IDE等4000款产品火热销售中 >>

相关链接:

在之前的文章中,我们为大家详细介绍了如何在JavaScript、React中使用SpreadJS导入和导出Excel文件的方法(点击这里回顾>>),本文我们将为大家介绍该问题在Angular中的实现。

获取SpreadJS最新正式版下载

Excel 电子表格自 1980 年代以来一直为各行业所广泛使用,至今已拥有超过3亿用户,大多数人都熟悉 Excel 电子表格体验。许多企业在其业务的各个环节中使用了 Excel 电子表格进行预算和规划。

通常情况下,刚开始时我们的业务流程中的数据简单,也不涉及复杂的格式和数据关系。但随着组织的发展,可能很难不开始依赖 Excel 的功能。

在应用程序中使用SpreadJS的好处

SpreadJS可以为我们的Web应用提供更好的交互体验,以及更灵活的权限控制、数据整合、数据可视化、战略绩效测量 (SPM)、复杂的统计分析等。多年来,Excel 兼容性一直是SpreadJS最重要的功能之一。

SpreadJS 提供了熟悉的 Excel 电子表格界面。用户可以通过SpreadJS直接在页面端导入和导出 Excel 文件,甚至可以在网页上构建企业的绩效和业务仪表板——这一切无需依赖 Excel。

本文演示了如何在 Angular 环境中使用 SpreadJS 导入和导出 Excel 电子表格。

以下是在 Angular 中导入和导出 Excel 电子表格的步骤:

在应用程序中安装SpreadJS组件

应该注意的是,由于我们使用的是 Angular CLI,我们需要确保它与 NPM 一起安装:

npm install -g @angular/cli

由于我们将使用 SpreadJS 的 Excel 导入和导出功能,因此我们需要 ExcelIO 组件。你可以使用 NPM 安装它和基本的 SpreadJS 文件:

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

实例化SpreadJS组件

SpreadJS可以添加到app.component.html 页面,如下所示:

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

实例化 SpreadJS 组件并在 app.component.ts 文件中创建 ExcelIO 类的对象,代码如下:

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

报表设计器的基本操作界面介绍

创建一个接受 XLSX 文件的输入元素

对于导入,我们将创建一个接受 XLSX 文件的输入元素。让我们在 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>

添加导入代码

ExcelIO 对象打开所选文件并以 相应格式返回结果。这个 数据可以被 SpreadJS 直接理解,所以我们将在 onFileChange() 函数中为 change 事件编写导入代码。

添加导出代码

同样,让我们添加一个按钮来处理导出功能。要添加导出按钮,我们可以使用:

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

我们还需要处理这个按钮的点击事件并在那里编写我们的代码。 ExcelIO 可将其保存为 BLOB,稍后需要将此 blob 数据传递给文件保护程序组件的 saveAs() 函数。

应该注意的是,我们使用了文件保护程序组件来实现导出功能。要在你的项目中包含文件保护程序,请按照以下步骤操作:

  1. 运行“npm install file-saver –save”命令
  2. 运行“npm install \@types/file-saver –save-dev”命令
  3. 将此第三方库添加到“.angular”

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

  1. 导入组件

import {saveAs} from 'file-saver';

报表设计器的基本操作界面介绍

现在已经可以在 Angular 中使用 SpreadJS 成功导入和导出 Excel 文件了。

本文内容源自葡萄城

慧都2022年终促销火热开启,欢迎选购

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自:葡萄城

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线咨询
联系我们

客服热线
023-68661681

QQ客服

意见反馈


添加微信获专业服务

TOP
在线客服系统
live chat