当前位置: 首页 > 工具软件 > colorful.js > 使用案例 >

vue3项目使用SpreadJS(授权,首次渲染页面卡死)

长孙作人
2023-12-01

vue3项目SpreadJS使用

前段时间接到一个需求,需要在项目中使用到SpreadJS,第一次接触SpreadJS,感觉这个表格控件的功能真的是非常的强大,基本满足excel的使用功能,目前发现的不足就是,当json文件中数据量大,包含大量计算公式时,首次的渲染可能较慢,还有的就是要收费。

  1. 安装依赖
由于项目中使用的是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)  // 激活渲染第一页
 类似资料: