前段时间接到一个需求,需要在项目中使用到SpreadJS,第一次接触SpreadJS,感觉这个表格控件的功能真的是非常的强大,基本满足excel的使用功能,目前发现的不足就是,当json文件中数据量大,包含大量计算公式时,首次的渲染可能较慢,还有的就是要收费。
由于项目中使用的是13.2.0的版本,所以文章针对该版本阐述,可根据个人需求安装依赖
"@grapecity/spread-excelio": "^13.2.0",
"@grapecity/spread-sheets": "^13.2.0",
"@grapecity/spread-sheets-resources-zh": "^13.2.0",
"@grapecity/spread-sheets-vue": "^13.2.0",
2、引入依赖(可在main文件或使用组件中引入和授权)
import GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-vue";
import "@grapecity/spread-sheets-resources-zh";
import ExcelIO from "@grapecity/spread-excelio";
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
// 控件中文显示(默认是英文的)
GC.Spread.Common.CultureManager.culture("zh-cn");
// 控件授权(your key就是你的授权key,控件购买后会有项目域名对应的key,也可以申请免费试用版的,有期限)
GC.Spread.Sheets.LicenseKey = ExcelIO.LicenseKey = "your key"
3、组件中使用(部分代码省略)
创建一个SpreadIndex.vue
<template>
<--! 装载控件的容器, 也可以直接使用spread-sheets-vue提供的组件gc-spread-sheets和gc-worksheet -->
<div ref="sheetView" :style="height: 700px; width: 100%; text-align: left;"></div>
</template>
// 主要针对vue3项目使用,vue2项目只需要更改对应语法即可
const sheetView = ref<any>(null);
onMounted(() => {
const workbook = new GC.Spread.Sheets.Workbook(sheetView.value);
emit('workbookInitialized', workbook )
)
创建一个SpreadSheets.vue
<SpreadIndex @workbookInitialized = 'workbookInitialized' />
let _spread = ref<any>(undefined);
const workbookInitialized = (spread: any) => {
_spread = spread;
}
*以上代码便可以实现一个空的excel页面,vue2项目中两个组件内容可合并一起,但是在vue3项目中如果公式量大,第一次渲染时页面会一直卡死,暂时还不知道具体是何原因造成
4、数据请求渲染sheet
// 设置属性根据需要设置,以下列举常用属性
const option = {
ignoreFormula: false, // 忽略公式,页面不重新计算
ignoreStyle: false, // 忽略样式加载
doNotRecalculateAfterLoad: false // 不计算全部公式
autoFitColumn: false // 不自适应列宽
incrementalLoading: false // 增量加载
}
// json接口请求返回的文件流
_spread.fromJSON(json,option)
_spread.options.tabStripVisiblr = false // 不显示底部sheet页
_spread.setActiveSheetIndex(0) // 激活渲染第一页