VUE 在线编辑 EXCEL , SPERADJS的使用
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、VUE 在线编辑 EXCEL 功能
- 二、使用步骤
- 1.引入库
- 2.组件制作
前言
spreadjs的使用
提示：以下是本篇文章正文内容，下面案例可供参考
一、VUE 在线编辑 EXCEL 功能
最近有个需求是在线编辑 EXCEL， 文件数据从后台获取，能保存到后台，一开始想用 ONLY_OFFICE
发现只能预览却不能编辑，于是在网上发现了spreadjs
二、使用步骤
1.引入库
代码如下（示例）：
"@grapecity/spread-excelio": "^14.0.10",
"@grapecity/spread-sheets": "^14.0.10",
"@grapecity/spread-sheets-barcode": "^14.0.10",
"@grapecity/spread-sheets-charts": "^14.0.10",
"@grapecity/spread-sheets-designer": "^14.0.10",
"@grapecity/spread-sheets-designer-resources-cn": "^14.0.10",
"@grapecity/spread-sheets-designer-vue": "^14.0.10",
"@grapecity/spread-sheets-languagepackages": "^14.0.10",
"@grapecity/spread-sheets-pdf": "^14.0.10",
"@grapecity/spread-sheets-pivot-addon": "^14.0.10",
"@grapecity/spread-sheets-print": "^14.0.10",
"@grapecity/spread-sheets-resources-zh": "^14.0.10",
"@grapecity/spread-sheets-shapes": "^14.0.10",
"@grapecity/spread-sheets-vue": "^14.0.10",
————————————————
直接复制到 package.json 执行 npm install 即可
原文链接：
2.组件制作
代码如下（示例）：
<template><div style="background:#fff;top:0;bottom:0;left:0;right:0;height: 100%"><div id="designerId" style="width:100%; height:100%;" /><div id="designerHostId" style="width:100%; height:100%;border: 1px solid gray;" /></div>
</template><script>
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import '@grapecity/spread-sheets-resources-zh'
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import '@grapecity/spread-sheets-designer-resources-cn'
import '@grapecity/spread-sheets-designer'
import { IO } from '@grapecity/spread-excelio'
import GC from '@grapecity/spread-sheets'GC.Spread.Common.CultureManager.culture('zh-cn')export default {name: 'Designer',props: {},data() {return {spread: null,importExcelFile: null,exportFileName: 'export.xlsx',password: ''}},beforeDestroy() {window.removeEventListener('keydown', this.handleEvent) // 在页面销毁的时候记得解除},mounted() {window.addEventListener('keydown', this.handleEvent)// 初始化 Spreadvar spread = new GC.Spread.Sheets.Workbook(document.getElementById('designerId'))this.$data.spread = spread// 我的后台获取文件的接口接口api.exportDecExcel({ 接口调用参数 }).then(res => {// res 后台返回的 blob 文件流， 其实 file 也是可以得this.loadExcel(res)// 初始化设计器与默认配置和上面创建的扩展组件var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById('designerHostId'), '', spread)})},methods: {handleEvent(event) {// 这里 CTRL+S 保存文件，可以在这里写存储逻辑if (event.keyCode === 83) {event.preventDefault()event.returnValue = false // 阻止直接保存网页// eslint-disable-next-line no-prototype-builtinsif (event.ctrlKey && event.code === 'KeyS') {// 在这里写保存需要执行的逻辑this.saveExcel()}}},loadExcel(e) {// 加载文件 e 在这里是 blob 文件流const spread = this.$data.spreadconst excelIo = new IO()const excelFile = e// here is excel IO APIexcelIo.open(excelFile, function(json) {const workbookObj = jsonspread.fromJSON(workbookObj)}, function(e) {// process erroralert(e.errorMessage)}, {})},saveExcel() {const spread = this.spreadconst excelIo = new IO()const json = spread.toJSON()// here is excel IO APIexcelIo.save(json, function(blob) {// 这里可以写 调用后台的逻辑 用FormData 即可提交，这里我 写的是下载到本地文件const blobURL = window.URL.createObjectURL(blob)const tempLink = document.createElement('a')tempLink.style.display = 'none'tempLink.href = blobURLtempLink.setAttribute('download', decodeURI('下载文件' + '.xlsx'))if (typeof tempLink.download === 'undefined') {tempLink.setAttribute('target', '_blank')}document.body.appendChild(tempLink)tempLink.click()document.body.removeChild(tempLink)window.URL.revokeObjectURL(blobURL)}, function(e) {// process errorconsole.log(e)}, {})}}
}
</script><style scoped>
</style>。 SPREADJS 还有其他更多用法，就部一一叙述了
希望大家多多点赞收藏
VUE 在线编辑 EXCEL , SPERADJS的使用
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、VUE 在线编辑 EXCEL 功能
- 二、使用步骤
- 1.引入库
- 2.组件制作
前言
spreadjs的使用
提示：以下是本篇文章正文内容，下面案例可供参考
一、VUE 在线编辑 EXCEL 功能
最近有个需求是在线编辑 EXCEL， 文件数据从后台获取，能保存到后台，一开始想用 ONLY_OFFICE
发现只能预览却不能编辑，于是在网上发现了spreadjs
二、使用步骤
1.引入库
代码如下（示例）：
"@grapecity/spread-excelio": "^14.0.10",
"@grapecity/spread-sheets": "^14.0.10",
"@grapecity/spread-sheets-barcode": "^14.0.10",
"@grapecity/spread-sheets-charts": "^14.0.10",
"@grapecity/spread-sheets-designer": "^14.0.10",
"@grapecity/spread-sheets-designer-resources-cn": "^14.0.10",
"@grapecity/spread-sheets-designer-vue": "^14.0.10",
"@grapecity/spread-sheets-languagepackages": "^14.0.10",
"@grapecity/spread-sheets-pdf": "^14.0.10",
"@grapecity/spread-sheets-pivot-addon": "^14.0.10",
"@grapecity/spread-sheets-print": "^14.0.10",
"@grapecity/spread-sheets-resources-zh": "^14.0.10",
"@grapecity/spread-sheets-shapes": "^14.0.10",
"@grapecity/spread-sheets-vue": "^14.0.10",
————————————————
直接复制到 package.json 执行 npm install 即可
原文链接：
2.组件制作
代码如下（示例）：
<template><div style="background:#fff;top:0;bottom:0;left:0;right:0;height: 100%"><div id="designerId" style="width:100%; height:100%;" /><div id="designerHostId" style="width:100%; height:100%;border: 1px solid gray;" /></div>
</template><script>
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import '@grapecity/spread-sheets-resources-zh'
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import '@grapecity/spread-sheets-designer-resources-cn'
import '@grapecity/spread-sheets-designer'
import { IO } from '@grapecity/spread-excelio'
import GC from '@grapecity/spread-sheets'GC.Spread.Common.CultureManager.culture('zh-cn')export default {name: 'Designer',props: {},data() {return {spread: null,importExcelFile: null,exportFileName: 'export.xlsx',password: ''}},beforeDestroy() {window.removeEventListener('keydown', this.handleEvent) // 在页面销毁的时候记得解除},mounted() {window.addEventListener('keydown', this.handleEvent)// 初始化 Spreadvar spread = new GC.Spread.Sheets.Workbook(document.getElementById('designerId'))this.$data.spread = spread// 我的后台获取文件的接口接口api.exportDecExcel({ 接口调用参数 }).then(res => {// res 后台返回的 blob 文件流， 其实 file 也是可以得this.loadExcel(res)// 初始化设计器与默认配置和上面创建的扩展组件var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById('designerHostId'), '', spread)})},methods: {handleEvent(event) {// 这里 CTRL+S 保存文件，可以在这里写存储逻辑if (event.keyCode === 83) {event.preventDefault()event.returnValue = false // 阻止直接保存网页// eslint-disable-next-line no-prototype-builtinsif (event.ctrlKey && event.code === 'KeyS') {// 在这里写保存需要执行的逻辑this.saveExcel()}}},loadExcel(e) {// 加载文件 e 在这里是 blob 文件流const spread = this.$data.spreadconst excelIo = new IO()const excelFile = e// here is excel IO APIexcelIo.open(excelFile, function(json) {const workbookObj = jsonspread.fromJSON(workbookObj)}, function(e) {// process erroralert(e.errorMessage)}, {})},saveExcel() {const spread = this.spreadconst excelIo = new IO()const json = spread.toJSON()// here is excel IO APIexcelIo.save(json, function(blob) {// 这里可以写 调用后台的逻辑 用FormData 即可提交，这里我 写的是下载到本地文件const blobURL = window.URL.createObjectURL(blob)const tempLink = document.createElement('a')tempLink.style.display = 'none'tempLink.href = blobURLtempLink.setAttribute('download', decodeURI('下载文件' + '.xlsx'))if (typeof tempLink.download === 'undefined') {tempLink.setAttribute('target', '_blank')}document.body.appendChild(tempLink)tempLink.click()document.body.removeChild(tempLink)window.URL.revokeObjectURL(blobURL)}, function(e) {// process errorconsole.log(e)}, {})}}
}
</script><style scoped>
</style>。 SPREADJS 还有其他更多用法，就部一一叙述了
希望大家多多点赞收藏