如何在浏览器中导入Excel表格插件(上)
本文由葡萄城技术团队于博客园原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
前言|问题背景
作为一名优秀的打工人,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
(npm创建Vue指令)
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集成到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参考文档)。
//文件上传的方法 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集成在线编辑器的内容放在了下一篇文章中。
备注:
整理的完整源码在源码链接的vue3-spreadJS-ts文件,直接在终端中使用npm run dev指令运行即可。
源码链接:https://gitee.com/GrapeCity/SpreadJS__20230605BiaoGeChaJian (Gitee)
https://github.com/GrapeCityXA/SpreadJSBiaoGEcHAJian (Github)
更多参考资料:
扩展资料:
在线Excel表格文档版本管理的设计和实现 - 葡萄城技术博客
提高工作效率的神器:基于 SpreadJS 实现Chrome Excel扩展插件 - 葡萄城技术博客
类Excel表格控件SpreadJS应用场景 —— 企业所得税申报系统的分析与解决方案 - 葡萄城技术博客