SpreadJS 在Vue 上的引用

一、相关链接地址

• SpreadJS 官网

• SpreadJS 示例

二、引入组件

添加到package.json 后，终端执行指令：npm install

"dependencies": {
    "@grapecity/spread-excelio": "^16.0.3",
    "@grapecity/spread-sheets": "^16.0.3",
    "@grapecity/spread-sheets-barcode": "^16.0.3",
    "@grapecity/spread-sheets-charts": "^16.0.3",
    "@grapecity/spread-sheets-designer": "^16.0.3",
    "@grapecity/spread-sheets-designer-resources-cn": "^16.0.3",
    "@grapecity/spread-sheets-io": "^16.0.3",
    "@grapecity/spread-sheets-languagepackages": "^16.0.3",
    "@grapecity/spread-sheets-pdf": "^16.0.3",
    "@grapecity/spread-sheets-print": "^16.0.3",
    "@grapecity/spread-sheets-resources-zh": "^16.0.3",
    "@grapecity/spread-sheets-shapes": "^16.0.3",
    "@grapecity/spread-sheets-vue": "^16.0.3",
    // 其他组件
    ...
}

三、前端开发

代码示例：

<template>
  <div style="background:#fff;top:0;bottom:0;left:0;right:0;height: 100%">
    <!-- Execl工作区 -->
    <div id="designerId" style="width:100%; height:100%;" />
    <!-- 状态栏 -->
    <div id="designerHostId" style="width:100%; height:100%;border: 1px solid gray;" />
  </div>
</template>

<script>
GC.Spread.Common.CultureManager.culture('zh-cn')
import GC from '@grapecity/spread-sheets'
import { IO } from '@grapecity/spread-excelio'
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'

export default {
  data() {
    return {
      spread: null,
      importExcelFile: null,
      exportFileName: 'spreadJSExport.xlsx',
      password: ''
    }
  },

  beforeDestroy() {
    // 在页面销毁时，接触'keydown'监听事件
    window.removeEventListener('keydown', this.handleEvent)
  },
  // 钩子函数，页面渲染完成后自动引动函数
  mounted() {
    // 监听按钮
    window.addEventListener('keydown', this.handleEvent)
    // 初始化 Spread
    const spread = new GC.Spread.Sheets.Workbook(document.getElementById('designerId'))
    this.$data.spread = spread
    // 获取文件的接口
    this.getExcelFile().then(res => {
      // res 后台接口返回blob 文件流
      this.loadExcel(res)
      // 初始化设计器与默认配置和上面创建的扩展组件
      const 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()
        }
      }
    },
    // 后端获取文件流接口
  	getExcelFile(){
      // 平台封装请求，可自行编码发起Get 请求
      return request({
          url: 'http://localhost:8088?action=loadSpreadjsfile',
          responseType: 'blob'
      })
	},
    loadExcel(data) {
      // 加载文件data, 在这里是blob 文件流
      const spread = this.$data.spread
      const excelIo = new IO()
      const excelFile = data
      // 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>

四、后端开发

后端代码示例：

/**
* Blob 文件流接口
*/
public void loadSpreadjsfile(HttpServletRequest request, HttpServletResponse response) throws IOException {
 		FileInputStream inputStream = null;
        byte[] bytes = null;
        try {
            // 这边是写死的文件路径
            File file = new File("C:\\Downloads\\spreadJsFile.xlsx");
            // 以流的形式下载文件。
            InputStream fis = new BufferedInputStream(new FileInputStream("C:\\Downloads\\spreadJsFile.xlsx"));
            byte[] buffer = new byte[fis.available()];
            fis.read(buffer);
            fis.close();
            // 清空response
            response.reset();
            // 设置response的Header
            response.addHeader("Content-Disposition", "attachment;filename=" + new String("spreadJsFile.xlsx".getBytes()));
            response.addHeader("Content-Length", "" + file.length());
            OutputStream toClient = new BufferedOutputStream(response.getOutputStream());
            response.setContentType("application/octet-stream");
            toClient.write(buffer);
            toClient.flush();
            toClient.close();
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (inputStream != null) {
                try {
                    inputStream.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }