葡萄城的简单使用案例：npm+vue

操作流程：

1、按照葡萄城相关依赖

2、在test.vue页面中按需引入并使用

按需引用

import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css';
import '@grapecity/spread-sheets-vue';
import GC from '@grapecity/spread-sheets';
import * as ExcellO from "@grapecity/spread-excelio";
import '@grapecity/spread-sheets-resources-zh';
GC.Spread.Common.CultureManager.culture("zh-cn");

Test.vue

<template>
	<el-button type="primary" @click="onExportClick">导出</el-button>
	<gc-spread-sheets style="width : 1654px; height : 800px" class="spread-host" @workbookInitialized="initSpread">
                    <gc-worksheet></gc-worksheet>
	</gc-spread-sheets>
</template>
data() {
  return {
  	fileType:'',
        spreadData:'',
        sheetMessage: '',
        licenseKey: ''
  }
},
created() {
  GC.Spread.Sheets.LicenseKey = ExcellO.LicenseKey = this.licenseKey;
  this.modelCode = 'TEST';
  this.loadData();
},
methods: {
  onExportClick : function(){
    // 导出
    if(this.sheetMessage) {
      this.spreadData= this.ungzipString(this.sheetMessage);
      // 报表导出
      var spread = new GC.Spread.Sheets.Workbook();
      spread.fromJSON(this.spreadData,{ignoreFormula:true});
      var sheet = spread.getActiveSheet()
      var spreadJSON = spread.toJSON({ includeBindingSource: true });
      var excelIO = new ExcellO.IO();
      let sheeetName = this.fileName
      excelIO.save(JSON.stringify(spreadJSON), function(blob){
      FileSaver.saveAs(blob, sheeetName)
      })
    } else {
    	this.$message.error('暂无数据');
    }
  },
  initSpread(spread){
      this.spread= spread;   
      spread.suspendPaint();
      spread.resumePaint();
  },
  loadData () {
      this.spreadData=''
      let workbookData = data; // data后端返回的execl数据，具体内容以流形式
      // 页面显示
      this.fileName = workbookData.fileName;
      this.dateBelongs = workbookData.fromDate;
      this.sheetMessage = workbookData.workbook
      let transferZip = ungzipString(workbookData.workbook);
      this.spread.fromJSON(transferZip,{ignoreFormula:true})
  },
},
beforeDestroy() {
	this.spreadData=''
},