一、spreadjs是什么？

示例：spreadjs 是纯前端的一种工具，该工具是为了解决数据表格化而创建的。主要是为了在web前端实现excel表格的效果

二、使用步骤

1.引入库

package.json文件配置如下

"dependencies": {"@grapecity/spread-sheets": "^15.0.6","@grapecity/spread-sheets-vue": "^15.0.6","@grapecity/spread-excelio":"^15.0.6","@grapecity/spread-sheets-barcode":"^15.0.6","@grapecity/spread-sheets-charts":"^15.0.6","@grapecity/spread-sheets-languagepackages":"^15.0.6","@grapecity/spread-sheets-pdf":"^15.0.6","@grapecity/spread-sheets-print":"^15.0.6","@grapecity/spread-sheets-resources-zh":"^15.0.6","@grapecity/spread-sheets-shapes":"^15.0.6","@grapecity/spread-sheets-pivot-addon":"^15.0.6","@grapecity/spread-sheets-designer":"^15.0.6","@grapecity/spread-sheets-designer-resources-cn":"^15.0.6","@grapecity/spread-sheets-designer-vue":"^15.0.6","vue": "^2.5.2","vue-router": "^3.0.1"},

代码如下（示例）：

安装SpreadJS npm包 - 我们通过使用 @grapecity/spread-sheets-vue 来分发Vue SpreadJS 控件. 最主要的@grapecity/spread-sheets 包是功能模块核心。在应用程序根目录运行下列命令来安装这些包最新的版本。
npm install @grapecity/spread-sheets-vue @grapecity/spread-sheets
//or if you are using yarn
yarn add @grapecity/spread-sheets-vue @grapecity/spread-sheetsimport '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
// import * as GC from '@grapecity/spread-sheets'
import '@grapecity/spread-sheets-vue'
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import '@grapecity/spread-sheets-designer-resources-cn'
import { Designer } from '@grapecity/spread-sheets-designer-vue'initWorkbook: function (spread) {//initializinglet worksheet = spread.getActiveSheet();},

2.使用

代码如下（示例）：

在应用程序内添加SpreadJS Vue控件/初始化SpreadJS电子表格 - 打开src\App.vue并用下列代码替换文件内容。
<template><div><gc-spread-sheets-designer@designerInitialized='initWorkbook'></gc-spread-sheets-designer></div>
</template>
methods: {initWorkbook (designer) {console.log('designer')// initializinglet spread = designer.getWorkbook()let sheet = spread.getActiveSheet()// Setting Values- Textsheet.setValue(1, 1, 'Setting Values')// Setting Values - Numbersheet.setValue(2, 1, 'Number')sheet.setValue(2, 2, 23)sheet.setValue(3, 1, 'Text')sheet.setValue(3, 2, 'GrapeCity')sheet.setValue(4, 1, 'Datetime')// Setting Values - DateTimesheet.getCell(4, 2).value(new Date(2020, 10, 7)).formatter('mm-dd-yyyy')// let designer = spread.Sheets.Designer.findControl('gc-designer-container')}}

展示：

3.导出

import { saveAs } from "file-saver";
import * as excelIo from "@grapecity/spread-excelio";
//导出表格exportExcel(type) {let spread = this.spread;//设置导出的文件名let fileName =this.spreadMsg.title + '      ' +" 日期：" +this.spreadMsg.dateif (fileName.substr(-5, 5) !== ".xlsx") {fileName += ".xlsx";}let json = JSON.stringify(spread.toJSON({includeBindingSource: true,}));// console.log('json',json)// here is excel IO APInew excelIo.IO().save(json,function (blob) {// console.log(blob)saveAs(blob, fileName);},function (e) {// process errorconsole.log(e);});},

4.中文化

import '@grapecity/spread-sheets-resources-zh';GC.Spread.Common.CultureManager.culture("zh-cn");

5.遇到的问题

1、在遇到v-for 循环渲染是页面卡顿反应慢的问题
可以在逻辑开始的时候先暂停渲染 suspendPaint()
挂起活动表单和标签条的绘制，然后逻辑计算完成后再开始渲染resumePaint()恢复活动表单和标签条的绘制，减少渲染次数，就会变快。

总结

推荐大家看官方网站，更详细我就是在这对于我自己遇到的问题做一下汇总
https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/quickstart/quickstart-vue

使用spreadjs vue版本相关推荐

解决vue版本不匹配的问题 Vue packages version mismatch:
解决vue版本不匹配的问题 Vue packages version mismatch: 参考文章: (1)解决vue版本不匹配的问题 Vue packages version mismatch: ( ...
二代身份证读取中控ID180 二三代身份证阅读器 Vue版本
二代身份证读取中控ID180 二三代身份证阅读器 Vue版本设备设备名称:台式身份证阅读机产品型号:ID180 设备驱动和文档链接:https://pan.baidu.com/s/1nAYk ...
vue/cli 和 vue 版本对应及安装
文章目录 Vue Cli 使用方式: 关于Vue Cli版本介绍 @vue/cli 安装: 版本号对应查看vue和@vue/cli版本: Vue Cli Vue CLI = Vue + 一堆的js插 ...
创建脚手架时，查看vue版本
查看当前创建的脚手架应用的vue版本问题描述: 每次重启电脑后创建一个脚手架,都直接帮我创建一个vue3的版本,但第二次创建时会跳出选择字眼查看当前vue版本: 进入项目的根目录,运行:npm l ...
抓娃娃机vue版本和jquery版本
由于公司需求,着手研究H5抓娃娃,从网上找到一份简单的jQuery手机H5抓娃娃机代码.先感谢下最初始分享代码的那位同志.这个分享对我们这些非专职前端的phper来说很关键.虽然简单,但是功能也是都实 ...
11 贪吃蛇小游戏 js版本 + vue版本
前言 // 呵呵, 1024 发一波基础知识的库存缘于一些小的需求因为一些原因可能到这里就不会再往后面设计了主要分为了两个版本, html + js 的版本和 vue 的版本核心的意 ...
vue版本的仿京东放大镜代码还有原生js版本的。（组件封装）
vue版本的仿京东放大镜 <template><div class="maxBox"><divref="left"class=&q ...
【ureport2 vue版本实现】
ureport2 vue版本实现开放源ureport2是采用jquery实现的,前端体验低于vue,加载文件过大,尤其设计器页面文件designer.bundle.js达到3.7M,common.b ...
webpack版本和vue版本的冲突问题
最近在做vue的实例项目的时候,遇到用webpack来打包项目的时候,出现了一些版本的兼容性冲突问题,导致运行报错,出现的结果和解决办法如下,在此记录一下: 错误1:TypeErroethis.get ...
在vue2中使用vue3的核心功能（渐进式升级vue版本）
一.前言学了真香的vue3语法,但目前的vue2项目中短期内不会再升级了,空有屠龙之术无法施展?来试试以下的解决方案,让你在vue2项目中也能用上vue3的核心语法-组合式API. 二.选项式API ...

使用spreadjs vue版本

文章目录