关于前端:新人必看手把手教你如何使用浏览器表格插件下

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

前言 | 问题背景

作为一名优良的打工人，Excel 是大家下班中必不可少的办公软件。随着互联网时代的到来，越来越多的公司开始应用各种 B / S 零碎来解决表格数据文件。那么有没有一种能够间接在浏览器中应用的 Excel 插件去解决数据呢？答案是必定的。本文小编将为大家介绍如何在 Vue 框架中集成在线表格插件（以下简称为“SpreadJS”）和在线表格编辑器（类 Excel 浏览器插件）实现在浏览器中应用 Excel 插件来解决数据。

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

上一篇文章 (《新人必看！手把手教你如何应用浏览器表格插件（上）》) 小编为大家介绍了如何在 Vue 框架中集成表格插件（SpreadJS），本篇小编将持续为大家介绍如何在 Vue 中集成在线表格编辑器。

如何在 Vue 框架中集成在线表格编辑器（designer）

在 Vue 中集成在线表格编辑器：

本节内容小编将为大家介绍 Vue 框架中如何集成在线表格编辑器和如何实现应用编辑器实现表格数据绑定。

Vue 集成在线表格编辑器和 SpreadJS 的办法类似，首先引入须要集成到 Vue 中的资源，其次应用 styleInfo 标签和 designerInitialized 设置表格的大小（应用办法与 Vue 集成 SpreadJS 一样，具体能够参考第一篇文章）。

import {defineComponent} from "Vue"

// SpreadJS 外围资源

import GC from "@grapecity/spread-sheets"

// 形态资源

import "@grapecity/spread-sheets-shapes"

// 二维码资源

import "@grapecity/spread-sheets-barcode"

// 图表资源

import "@grapecity/spread-sheets-charts"

// 文件 IO 相干资源

import "@grapecity/spread-excelio"

// 打印资源 打印资源要在 pdf 之前

import "@grapecity/spread-sheets-print"

// 导出 pdf 相干资源

import "@grapecity/spread-sheets-pdf"

// 透视表相干资源

import "@grapecity/spread-sheets-pivot-addon"

// 集算表相干资源

import "@grapecity/spread-sheets-tablesheet"

// 组件运行时款式信息

import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"

// 组件运行时语言资源

import "@grapecity/spread-sheets-resources-zh"

// 设计器资源，设计器资源要在设计器外围资源之前

import "@grapecity/spread-sheets-designer-resources-cn"

// 设计器外围资源

import \* as GcDesigner from "@grapecity/spread-sheets-designer"

// 设计器 css

import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"

// 设计器对 Vue 的反对资源

import Designer from "@grapecity/spread-sheets-designer-Vue"

import {bindFile} from "../files/bindFile"

import {bindSchema,generateData} from "../files/bindTree.js"

（Vue 引入在线表格编辑器的资源）

实现数据绑定：

为了更形象、具体的形容数据绑定，小编将用一个简略的小案例为大家介绍在 SpreadJS 中数据绑定是如何实现的。

实现需求：通过 SpreadJS 实现一个简略的苹果销售量的数据表格。数据表格中的数据能够通过数据文件实现将数据回显到数据表格中。上面是具体实现的办法步骤：

（1）设计可视化表格：

应用 spreaeJs 表格设计器拉拽设计出一个表格如下图所示(和 Excel 创建表格的办法一样，不具体介绍)。

（初始化一个 Excel 表格）

除了 SpreadJS 可视化办法创建表格之外，小编再为大家再介绍一种应用数据文件实现表格的办法：

在提供的源码资源中蕴含了两个数据文件 bindFile.js 和 bindTree.js，而 bindFile.js 文件则是上图表格的 Json 文件格式，应用 spread.fromJSON(bindFile)办法能够读取 bindFile.js 文件中的内容并显示到页面上。

const loadBindData = (spread:GC.Spread.Sheets.Workbook) =\> {

// 加载文件（第一步）spread.fromJSON(bindFile)

}

（读取 bindFile.js 文件的代码）

（2）创立工作表：

设计完可视化表格之后就是创立数据表来存储数据，创立工作表也能够分为可视化创立工作表数据文件实现工作表，因为可视化设计工作表操作比较简单，小编在这里不作具体介绍。上面次要介绍如何通过代码实现数据表：应用 designer 的 setData 办法读取 bindTree.js 文件中的 bindSchema（数据表的 Json 格局）并加载到 SpreadJS 的页面中。

// 第二步绑定数据绑定表信息（designer 初始化实现之后，加载右侧 Tree）

designer.setData("treeNodeFromJson",JSON.stringify(bindSchema))

designer.setData("oldTreeNodeFromJson",JSON.stringify(bindSchema))

designer.setData('updatedTreeNode',JSON.stringify(bindSchema))

（实现创立工作表的代码）

（3）实现数据绑定：

设计完工作表之后，上面将介绍如何通过代码和数据文件实现数据绑定：

首先去调用 bindTree.js 文件中的 generateData 办法生成随机数据，而后应用

GC.Spread.Sheets.Bindings.CellBindingSource 办法去生成绑定的数据源，再将绑定的数据源放到初始化的流动页 sheet 中，最初去加载数据。具体实现代码如下：

const loadBindData = (spread:GC.Spread.Sheets.Workbook) =\> {

// 加载文件（第一步）spread.fromJSON(bindFile)

// 第三步绑定数据

// mock 数据

let data = generateData(20)

// 生成绑定数据源

let source = new GC.Spread.Sheets.Bindings.CellBindingSource(data)

// 获取以后流动 sheet

let sheet = spread.getActiveSheet() as GC.Spread.Sheets.Worksheet

// 获取 sheet 中的指标表格，并将表格的数据设置为随数据量主动纵向扩大

let table = sheet.tables.findByName('report_card')

table.expandBoundRows(true)

// 加载数据

sheet.setDataSource(source)

}

（实现数据绑定的代码）

将下面的步骤代码合在一起之后的整体代码如下所示：

/

/ 绑定数据信息（第二步）const initDesigner = (designerEntity:GcDesigner.Spread.Sheets.Designer.Designer) =\> {

designer = designerEntity

customeConfig(designer)

// 第二步绑定数据绑定表信息（designer 初始化实现之后，加载右侧 Tree）designer.setData("treeNodeFromJson",JSON.stringify(bindSchema))

designer.setData("oldTreeNodeFromJson",JSON.stringify(bindSchema))

designer.setData('updatedTreeNode',JSON.stringify(bindSchema))

let spread = designer.getWorkbook() as GC.Spread.Sheets.Workbook

loadBindData(spread)

}

const loadBindData = (spread:GC.Spread.Sheets.Workbook) =\> {

// 加载文件（第一步）spread.fromJSON(bindFile)

// 第三步绑定数据

// mock 数据

let data = generateData(20)

// 生成绑定数据源

let source = new GC.Spread.Sheets.Bindings.CellBindingSource(data)

// 获取以后流动 sheet

let sheet = spread.getActiveSheet() as GC.Spread.Sheets.Worksheet

// 获取 sheet 中的指标表格，并将表格的数据设置为随数据量主动纵向扩大

let table = sheet.tables.findByName('report_card')

table.expandBoundRows(true)

// 加载数据

sheet.setDataSource(source)

}

return{styleInfo,initDesigner}

（整体流程的代码）

（最终效果图）

做完这些之后便能够在浏览器中体验和应用在线编辑器了（高度相似 Excel 操作）。

备注：

整顿的残缺源码附文章下方 day2 文件夹中的 vue3-spreadJS-ts 文件，间接在终端中应用 npm run dev 指令运行即可。

源码链接：https://pan.baidu.com/s/1ddz8UCuDeVZEIvXiff70xw 明码：dnpx

总结

这两篇文章为大家具体的介绍了 SpreadJS 在 Vue 框架中应用的办法和具体的作用，心愿能够帮忙大家在学习 SpreadJS 的路线上能够起到帮忙。

更多参考资料：

本文对应的视频教程

表格控件技术材料文档

\>\>\>\> 扩大材料：

在线 Excel 表格文档版本治理的设计和实现 – 葡萄城技术博客 (grapecity.com.cn)

进步工作效率的神器：基于 SpreadJS 实现 Chrome Excel 扩大插件 – 葡萄城技术博客 (grapecity.com.cn)

类 Excel 表格控件 SpreadJS 利用场景 —— 企业所得税申报零碎的剖析与解决方案 – 葡萄城技术博客 (grapecity.com.cn)