共计 4593 个字符，预计需要花费 12 分钟才能阅读完成。
摘要：本文由葡萄城技术团队于博客园原创并首发。转载请注明出处：葡萄城官网，葡萄城为开发者提供业余的开发工具、解决方案和服务，赋能开发者。
前言 | 问题背景
作为一名优良的打工人，Excel 是大家下班中必不可少的办公软件。随着互联网时代的到来，越来越多的公司开始应用各种 B / S 零碎来解决表格数据文件。那么有没有一种能够间接在浏览器中应用的 Excel 插件去解决数据呢？答案是必定的。本文小编将为大家介绍如何在 Vue 框架中集成 SpreadJS 在线表格插件（以下简称为“SpreadJS”）和在线表格编辑器（类 Excel 浏览器插件）实现在浏览器中应用 Excel 插件来解决数据。
在本教程中，咱们将应用 node.js，请确保已装置最新版本，除此之外还须要应用软件 Visual Studio Code(以下简称“VSCode”) 作为编程环境，请您以管理员身份运行它。
如何在 Vue 框架中集成表格插件（SpreadJS）
在本节内容中，小编将向大家展现如何在 Vue 框架引入 SpreadJS 资源并实现简略的
上传文件、下载文件两个性能。
在 Vue 中集成 SpreadJS：
1．首先应用管理员权限关上 VSCode 软件，而后再用 VSCode 关上初始代码文件（文章下方资源包中）或者也能够抉择本人创立一个 Vue 我的项目，相干创立语法如下：
| \# npm 6.x | |
| npm create vite@latest Vue3-spread-ts --template Vue-ts | |
| \# npm 7+, extra double-dash is needed: | |
| npm create vite@latest Vue3-spread-ts --template Vue-ts | |
| \# yarn | |
| yarn create vite Vue3-spread-ts --template Vue-ts | |
| \# pnpm | |
| pnpm create vite Vue3-spread-ts -- --template Vue-ts |
2．创立完 Vue 我的项目之后，关上我的项目中的 package.json 文件夹，这个时候咱们须要在文件夹中引入 SpreadJS 组件包：
| { | |
| "name": "vue3-spread-ts", | |
| "private": true, | |
| "version": "0.0.0", | |
| "scripts": { | |
| "dev": "vite", | |
| "build": "vue-tsc --noEmit && vite build", | |
| "preview": "vite preview" | |
| }, | |
| "dependencies": { | |
| "@grapecity/spread-excelio": "15.1.0", | |
| "@grapecity/spread-sheets": "15.1.0", | |
| "@grapecity/spread-sheets-barcode": "15.1.0", | |
| "@grapecity/spread-sheets-charts": "15.1.0", | |
| "@grapecity/spread-sheets-languagepackages": "15.1.0", | |
| "@grapecity/spread-sheets-pdf": "15.1.0", | |
| "@grapecity/spread-sheets-pivot-addon": "15.1.0", | |
| "@grapecity/spread-sheets-print": "15.1.0", | |
| "@grapecity/spread-sheets-resources-zh": "15.1.0", | |
| "@grapecity/spread-sheets-shapes": "15.1.0", | |
| "@grapecity/spread-sheets-tablesheet": "15.1.0", | |
| "@grapecity/spread-sheets-vue": "15.1.0", | |
| "element-plus": "\^2.2.5", | |
| "file-saver": "\^2.0.5", | |
| "vue": "\^3.2.25" | |
| }, | |
| "devDependencies": { | |
| "@vitejs/plugin-vue": "\^2.3.3", | |
| "typescript": "\^4.5.4", | |
| "vite": "\^2.9.9", | |
| "vue-tsc": "\^0.34.7" | |
| } | |
| } |
（须要引入的 spreadJS 组件）
引入这些组件后，应用 npm install 命令来下载这些组件（第一次下载可能须要一些工夫）。下载实现之后应用命令 npm run dev 启动我的项目，如果在浏览器中看能够关上示意我的项目启动装置胜利。
3．我的项目启动后，关上 src\components 目录下的 OnlineSpread.Vue 文件，这个文件是 Vue 框架集成 SpreadJS 次要代码的寄存地位。（如果想自定义.Vue 文件编写代码也能够，但留神须要批改 APP.Vue 文件中的代码 import onlineSpread from ‘./components/OnlineSpread.Vue’ 为自定义的文件名称）。
3.1 引入 SpreadJS 资源：
为了将 SpreadJS 集成到 Vue 框架中，须要引入一些资源到我的项目中，这些资源蕴含了 SpreadJS 的次要资源、文件导入导出等。
| import {defineComponent} from 'Vue' | |
| // SpreadJS 组件运行时资源 | |
| import \* as GC from "@grapecity/spread-sheets" | |
| // 引入合乎本人我的项目主题的款式 | |
| import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" | |
| // 设置中文 | |
| import "@grapecity/spread-sheets-resources-zh" | |
| // 引入导入导出文件相干的资源 | |
| import \* as ExcelIO from "@grapecity/spread-excelio" | |
| // 引入文件导出 | |
| import {saveAs} from 'file-saver' | |
| // 引入打印相干资源 | |
| import "@grapecity/spread-sheets-print" | |
| // 引入导出 pdf 资源 | |
| import "@grapecity/spread-sheets-pdf" | |
| // 引入语言资源（反对中英文）GC.Spread.Common.CultureManager.culture('zh-cn') |
（SpreadJS 引入到 Vue 中的资源信息）
3.2 引入资源后，发现浏览器显示你的表格内容只有一行，这是因为表格的格局还未被设置，须要用 SpreadJS 的 hostStyle 标签和 workbookInitialized 标签来设置表格的大小和宽度。具体设置办法是先在 div 标签中设置 hostStyle 的格局（ 留神不要忘了 return hostStyle 标签 ），而后在 setup 办法中设置高度格局即可。
| // 引入组件 | |
| components:{'gc-spread-sheets':GcSpreadSheets} | |
| //div 标签 | |
| \<gc-spread-sheets :hostStyle="hostStyle" @workbookInitialized="initWorkbook"\> | |
| \</gc-spread-sheets\> | |
| // 设置高度格局，写在 setup 办法中 | |
| const hostStyle={height:'90vh'} | |
| return{hostStyle} |
（设置表格大小格局的代码）
上传文件和下载文件：
上传文件、下载文件的办法与设置表格大小的办法一模一样，首先也是在 div 标签中设置对应的按钮，
| \<el-upload | |
| class="upload-demo" | |
| accept=".xlsx" | |
| :before-upload="importFile" | |
| action='' | |
| \> | |
| \<el-button type="primary"\> 上传文件 \</el-button\> | |
| \</el-upload\> | |
| \<el-button type="primary" @click="downloadFile"\> 下载文件 | |
| \</el-button\>（在 div 标签中设置上传文件和下载文件的按钮）而后在 setup 办法中设置上传文件和下载文件的办法（[具体能够参考 SpreadJS 的 API 参考文档](https://demo.grapecity.com.cn/spreadjs/help/api/modules/GC.Data)）。// 文件上传的办法 | |
| const importFile = (file) =\> {let io = new ExcelIO.IO() | |
| // excelio 关上文件，回调函数中的参数时 SpreadJS 反对的 json 格局 | |
| io.open(file,(fileJSON) =\> { | |
| // fromJSON 中第二个参数为导入文件的控制参数，默认均为 false, 依据本人的需要增加, 都不要批改时可不传 | |
| spread.fromJSON(fileJSON,{ | |
| ignoreFormula: false, // 导入疏忽公式 | |
| ignoreStyle: false, // 导入疏忽款式 | |
| frozenColumnsAsRowHeaders: false, // 将解冻列当作行头 | |
| frozenRowsAsColumnHeaders: false, // 将解冻行作为列头 | |
| // 导入文件不立刻计算. Excel 文件保留时会主动计算, 当文件比拟大时, 能够导入后不计算, 进步导入效率. | |
| doNotRecalculateAfterLoad: false | |
| }) | |
| }) | |
| return false | |
| } | |
| // 文件下载的办法 | |
| const downloadFile = () =\> { | |
| // 获取当前工作簿 json,toJSON 也能够依据需要设置参数, 参考学习指南导入导出 json | |
| let fileJson = spread.toJSON() | |
| // 创立文件 IO 实例 | |
| let io = new ExcelIO.IO() | |
| // 保留文件 | |
| io.save(fileJson,(blob)=\>{ | |
| // excelIO 将文件转化为 blob, 传递给回调函数, 而后执行 file-saver 的 saveAs 保留 excel 文件. | |
| saveAs(blob,'导出文件.xlsx') | |
| },(e) =\> {console.log(e) | |
| }) | |
| } |
（设置上传文件和下载文件的代码）
做完这些之后便能够在浏览器中实现上传文件、批改文件内容并下载文件的操作了，同时还能够体验和应用表格插件（用法和 Excel 高度类似）。
PS：仔细的网友应该发现了，浏览器中只显示了表格，并没有显示 Excel 中上方的编辑器内容。起因是因为文章长度限度无奈一次介绍完，小编将 Vue 集成在线编辑器的内容放在了下一篇文章中。
备注：
整顿的残缺源码附文章下方 day1 文件夹中的 vue3-spreadJS-ts 文件，间接在终端中应用 npm run dev 指令运行即可。
源码链接：https://pan.baidu.com/s/13bZTosXVBe3Jy_z-rFhoog（百度网盘）提取码：abcd
更多参考资料：
本文对应的视频教程
表格控件技术材料文档
/>>>>> 扩大材料：
应用纯前端类 Excel 表格控件 SpreadJS 构建企业现金流量表
前端必读：如何在 JavaScript 中应用 SpreadJS 导入和导出 Excel 文件
SpreadJS 表格控件：打造预算编制模块的秘诀，超级财务总监都在用！
