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

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

前言 | 问题背景

作为一名优良的打工人,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表格控件:打造预算编制模块的秘诀,超级财务总监都在用!

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据