VUE 在线编辑 EXCEL , SPERADJS的使用

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

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 即可
原文链接：https://blog.csdn.net/qq_40161158/article/details/115641741

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)
    // 初始化 Spread
    var 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-builtins
        if (event.ctrlKey && event.code === 'KeyS') {
          // 在这里写保存需要执行的逻辑
          this.saveExcel()
        }
      }
    },
    loadExcel(e) {
    // 加载文件 e 在这里是 blob 文件流
      const spread = this.$data.spread
      const excelIo = new IO()
      const excelFile = e
      // here is excel IO API
      excelIo.open(excelFile, function(json) {
        const workbookObj = json
        spread.fromJSON(workbookObj)
      }, function(e) {
        // process error
        alert(e.errorMessage)
      }, {
      })
    },
    saveExcel() {
      const spread = this.spread
      const excelIo = new IO()
      const json = spread.toJSON()
      
      // here is excel IO API
      excelIo.save(json, function(blob) {
      // 这里可以写 调用后台的逻辑 用FormData 即可提交，这里我 写的是下载到本地文件
        const blobURL = window.URL.createObjectURL(blob)
        const tempLink = document.createElement('a')
        tempLink.style.display = 'none'
        tempLink.href = blobURL
        tempLink.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 error
        console.log(e)
      }, {
      })
    }
  }
}
</script>

<style scoped>
</style>

https://www.grapecity.com.cn/developer/spreadjs/vue。 SPREADJS 还有其他更多用法，就部一一叙述了

---

希望大家多多点赞收藏