Svelte框架结合SpreadJS实现纯前端类Excel在线填报

最近Stackoverflow2021开发者报告发布，在所有框架（不仅是前端），Svelte是最受欢迎的。

下面就让我们一起开始探索下Svelte这个前端框架。

npm create vite@latest myapp -- --template svelte
cd myapp
npm install
npm run dev

Components是 Svelte 应用程序的构建块。其中使用 HTML 超集写入.svelte文件文件。HTML 超集的所有三个部分(script、css和marku)都是可选的，如下代码。

<script>
// logic goes here
</script>

<!-- markup (zero or more items) goes here -->

<style>
/* styles go here */
</style>

SpreadJS 是葡萄城结合 40 余年专业控件技术和在电子表格应用领域的经验而推出的纯前端表格控件，基于 HTML5，兼容 450 多种 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，目前已支持在 Angular、 React、 Vue 等前端框架中实现高效的模板设计、在线编辑和数据绑定等功能。那么我们来看看如何在Svelte 框架中使用SpreadJS呢？

1、首先在package.json文件中引入SpreadJS相关依赖文件：

"devDependencies": { 
"svelte": "^3.52.0",
"vite": "^3.2.3",
"@grapecity/spread-excelio": "15.2.5",
"@grapecity/spread-sheets": "15.2.5",
"@grapecity/spread-sheets-barcode": "15.2.5",
"@grapecity/spread-sheets-charts": "15.2.5",
"@grapecity/spread-sheets-designer": "15.2.5",
"@grapecity/spread-sheets-designer-resources-cn": "15.2.5",
"@grapecity/spread-sheets-languagepackages": "15.2.5",
"@grapecity/spread-sheets-pdf": "15.2.5",
"@grapecity/spread-sheets-pivot-addon": "15.2.5",
"@grapecity/spread-sheets-pivots": "^14.0.0",
"@grapecity/spread-sheets-print": "15.2.5",
"@grapecity/spread-sheets-resources-zh": "15.2.5",
"@grapecity/spread-sheets-shapes": "15.2.5",
"@grapecity/spread-sheets-tablesheet": "15.2.5",
"file-saver": "^2.0.5"
}

2、接着我们在lib文件夹下创建WorkSheet.svelte，在此文件中创建SpreadJS的目标DOM元素：

<div id="ss" class="spread-host"></div>

3、接着为此容器设置宽高：

<style>
 .spread-host {
 width: 500px;
 height: 600px;
 }
</style>

4、接着引入相关资源：

<script> 
import { onMount } from 'svelte';
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import GC from "@grapecity/spread-sheets";
</script>

5、最后在omMount生命周期钩子函数中，初始化Spread容器,并设置A1单元格内容为“hello,SpreadJS”：

<script> 
let spread = null;
 onMount(async () => {
 spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1});
 let sheet = spread.getActiveSheet();
 sheet.setValue(0, 0, 'hello,SpreadJS')
 sheet.setColumnWidth(0, 200)
 });
});
</script> 

6、完成WorkSheet.svelte文件的编辑后，在app.svelte文件中进行引入。最后实现效果如下：

之前简单提到了SpreadJS 的功能，其中，使用SpreadJS有三大应用场景，分别是数据填报、类Excel报表设计、表格文档协同编辑。本系列文章将围绕这三大应用场景结果Svelte框架来为大家做个简单介绍。

本文章主要讲述如何在Svelte框架结合SpreadJS实现纯前端类Excel在线填报。

首先介绍下什么是数据填报？数据填报，可作为独立的功能模块，用于管理业务流程、汇总采集数据，以及开发各类数据报送系统。因此，对于报表工具而言，其典型场景之一就是利用报表模板填报录入各种业务数据。

SpreadJS高度兼容Excel 如果业务人员已经习惯在Excel中进行报表设计，那么可以很平滑过度到SpreadJS的数据填报工作中。

下面以一个实际场景为例，进行模板设计，填报、导入导出功能来展开介绍。

1、模板设计

在Excel中进行模板设计，如下图所示：

对于经常使用Excel的工作人员来说，可以将原有的 Excel模板进行导入，同时也可以在Designer在线表格编辑器中进行模板设计。

2、导入导出Excel

用户可以将excel文件通过导入功能进行导入，在引入@grapecity/spread-sheets基础上，引入excelIO 与file-saver 。

import {IO} from "@grapecity/spread-excelio";
 import saveAs from 'file-saver'

然后设计html

<div>
<input type="file" class="input" on:change={changeFileDemo}>
<button on:click={loadExcel}>导入模板</button>
</div>
<div>
<input type="text" class="input" value={exportFileName} on:change={changeExportFileName}>
<button type="normal" on:click={saveExcel}>导出模板</button>
 </div>

进行导入导出相关逻辑：

<script>
let spread = null, importExcelFile = '', exportFileName = 'export.xlsx';
function changeFileDemo(e) {
 importExcelFile = e.target.files[0];
 }

 function loadExcel(e) {
 let excelIo = new IO();
 excelIo.open(importExcelFile, function (json) {
 let workbookObj = json;
 spread.fromJSON(workbookObj);
 }, function (e) {
 alert(e.errorMessage);
 });
 }

 function changeExportFileName(e) {
 exportFileName = e.target.value;
 }

 function saveExcel() {
 let excelIo = new IO();

 let fileName = exportFileName;
 if (fileName.substr(-5, 5) !== '.xlsx') {
 fileName += '.xlsx';
 }

 let json = spread.toJSON();

 excelIo.save(json, function (blob) {
 saveAs(blob, fileName);
 }, function (e) {
 console.log(e);
 });
 }
</script>

实现效果如下：

3、填报

导入Excel后，用户就可以按照需要进行填报了，每次填报结束，可以点击”保存“按钮进行保存，可以将结果传输给后端，也可以暂存在本地，待有网络条件后，进行上传。

当模板预留行数不够时，用户可以右键新增行，如下图所示：

有很多小伙伴注意到上面图片右键显示的是英文，此时可以通过以下代码进行汉化：

GC.Spread.Common.CultureManager.culture("zh-cn");

以上大致讲了下在线填报功能，下次将为大家讲述如何Svelte框架结合SpreadJS实现纯前端类Excel在线报表设计及数据绑定等功能。