前端必读3.0：如何在 Angular 中使用SpreadJS实现导入和导出 Excel 文件
<p>在之前的文章中，我们为大家分别详细介绍了在JavaScript、React中使用SpreadJS导入和导出Excel文件的方法，作为带给广大前端开发者的“三部曲”，本文我们将为大家介绍该问题在Angular中的实现。<br>Excel 电子表格自 1980 年代以来一直为各行业所广泛使用，至今已拥有超过3亿用户，大多数人都熟悉 Excel 电子表格体验。许多企业在其业务的各个环节中使用了 Excel 电子表格进行预算和规划。<br>
通常情况下，刚开始时我们的业务流程中的数据简单，也不涉及复杂的格式和数据关系。但随着组织的发展，可能很难不开始依赖 Excel 的功能。</p>
<h3 id="在你的应用程序中安装-spreadjs-组件">在你的应用程序中安装 SpreadJS 组件</h3>
<p>完整的Demo请点击此处下载：<br>
https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=MjM0MDU3fDk2NDQyNTkyfDE2NjM5MjI3NjF8NjI2NzZ8OTk3MTg%3D</p>
<p>应该注意的是，由于我们使用的是 Angular CLI，我们需要确保它与 NPM 一起安装：</p>
<pre><code>npm install -g @angular/cli
</code></pre>
<p>由于我们将使用 SpreadJS 的 Excel 导入和导出功能，因此我们需要 ExcelIO 组件。你可以使用 NPM 安装它和基本的 SpreadJS 文件：</p>
<pre><code>npm install @grapecity/spread-sheets @grapecity/spread-excelio @grapecity/spread-sheets-angular
</code></pre>
<h3 id="实例化-spreadjs-组件">实例化 SpreadJS 组件</h3>
<p>SpreadJS 可以添加到 app.component.html 页面，如下所示：</p>
<pre><code><gc-spread-sheets =”spreadBackColor” ="hostStyle" (workbookInitialized)="workbookInit($event)">
</gc-spread-sheets>
</code></pre>
<p>实例化 SpreadJS 组件并在 app.component.ts 文件中创建 ExcelIO 类的对象，代码如下：</p>
<pre><code>@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');
}
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/139239/202209/139239-20220923170217780-1269314098.png" alt="" loading="lazy"></p>
<h4 id="创建一个接受-xlsx-文件的输入元素">创建一个接受 XLSX 文件的输入元素</h4>
<p>对于导入，我们将创建一个接受 XLSX 文件的输入元素。让我们在 app.component.html 中添加以下代码：</p>
<pre><code><div class='loadExcelInput'>
<p>Open Excel File</p>
<input type="file" name="files[]" multiple id="jsonFile" accept=".xlsx" (change)="onFileChange($event)" />
</div>
</code></pre>
<h3 id="添加导入代码">添加导入代码</h3>
<p>ExcelIO 对象打开所选文件并以 JSON 格式返回结果。这个 JSON 数据可以被 SpreadJS 直接理解，所以我们将在 onFileChange() 函数中为 change 事件编写导入代码，如下所示：</p>
<pre><code>onFileChange(args: any) {
const self = this, file = args.srcElement && args.srcElement.files && args.srcElement.files;
if (self.spread && file) {
self.excelIO.open(file, (json: any) => {
self.spread.fromJSON(json, {});
setTimeout(() => {
alert('load successfully');
}, 0);
}, (error: any) => {
alert('load fail');
});
}
}
</code></pre>
<h4 id="添加导出代码">添加导出代码</h4>
<p>同样，让我们添加一个按钮来处理导出功能。要添加导出按钮，我们可以使用：</p>
<pre><code><div class='exportExcel'>
<p>Save Excel File</p>
<button (click)="onClickMe($event)">Save Excel!</button>
</div>
</code></pre>
<p>我们还需要处理这个按钮的点击事件并在那里编写我们的代码。 SpreadJS 将数据保存为 JSON，ExcelIO 可以使用 JSON 将其保存为 BLOB。稍后，需要将此 blob 数据传递给文件保护程序组件的 saveAs() 函数：</p>
<pre><code>onClickMe(args: any) {
const self = this;
const filename = 'exportExcel.xlsx';
const json = JSON.stringify(self.spread.toJSON());
self.excelIO.save(json, function (blob) {
saveAs(blob, filename);
}, function (error: any) {
console.log(error);
});
}
</code></pre>
<p>应该注意的是，我们使用了文件保护程序组件来实现导出功能。要在你的项目中包含文件保护程序，请按照以下步骤操作：</p>
<ol>
<li>运行“npm install file-saver –save”命令</li>
<li>运行“npm install @types/file-saver –save-dev”命令</li>
<li>将此第三方库添加到“.angular.json”<br>
"scripts": ["./node_modules/file-saver/FileSaver.js"]**</li>
<li>导入组件</li>
</ol>
<pre><code>import {saveAs} from 'file-saver';
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/139239/202209/139239-20220923170410466-788342066.png" alt="" loading="lazy"></p>
<p>现在已经可以在 Angular 中使用 SpreadJS 成功导入和导出 Excel 文件了。</p>
<p>更多纯前端表格在线demo示例 :https://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html<br>
纯前端表格应用场景：https://www.grapecity.com.cn/developer/spreadjs#scenarios<br>
移动端示例（可扫码体验）：http://demo.grapecity.com.cn/spreadjs/mobilesample/</p>
</div>
<div id="MySignature" role="contentinfo">
<hr>
<br>
<p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">本文是由葡萄城技术开发团队发布，转载请注明出处：葡萄城官网</p>
<!--p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">了解企业级低代码开发平台，请前往活字格
</p><p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">了解可嵌入您系统的在线 Excel，请前往SpreadJS纯前端表格控件</p>
<p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">了解嵌入式的商业智能和报表软件，请前往Wyn Enterprise
</p-->
<br><br><br>
来源：https://www.cnblogs.com/powertoolsteam/p/16723385.html
頁:
[1]