vue项目中使用spreadjs

收藏

按照这个教程 http://blog.51cto.com/powertoolsteam/2285038?source=dra 做的
但是当我加载了报表之后，进行路由跳转就会报错。

如图1. 我选择并加载了报表
image.png962445983.png

图2.此时我通过导航菜单路由跳转之后，控制台报错。
image.png672165221.png

如果我没有加载报表进行路由跳转就不会报错，只要执行了spread.fromJSON(json)在跳转路由就会报错，不知道为什么。

KevinChen · KevinChen

你好，我们没能重现你的问题，请换用Spreadjs安装包中的Demo，

Demo路径是：您下载的安装包解压路径\Spread.Sheets\Spread.Sheets.All.11.2.2\samples\VueSample

使用方法：

1、将此VueSample文件夹拷贝到您Vue的工程目录下

2、命令行进入此目录下

3、执行npm install

4、执行npm run build

5、执行npm run dev

运行成功后根据提示访问即可,如图：

image.png208193358.png

等时钟不成长 · 等时钟不成长

您好，我没有您所说的安装包啊，不知道去哪里找demo。我是直接
npm install @grapecity/spread-excelio@^11.2.3这样安装到我的项目中的。
以及下面这些
"@grapecity/spread-sheets": "^11.2.3",
"@grapecity/spread-sheets-print": "^11.2.3",
"@grapecity/spread-sheets-resources-zh": "^11.2.3",
"@grapecity/spread-sheets-vue": "^11.2.3",

KevinChen · KevinChen

你可以在官网上下载一个完整的SpreadJS包，地址是：

https://www.grapecity.com.cn/download/?pid=57

等时钟不成长 · 等时钟不成长

您好，我已经下载了，但是解压后目录里面没有sample啊
找不到这个路径\Spread.Sheets\Spread.Sheets.All.11.2.2\samples\VueSample
image.png91543273.png

等时钟不成长 · 等时钟不成长

不好意思，之前没看到。我找到了。
SpreadJS.Production.V11.2\Spread.Sheets\Spread.Sheets.Release.11.2.2\samples

等时钟不成长 · 等时钟不成长

你好，我看了咱们的VueSample例子。
里面没有涉及到ExcelIO的内容。
当我引入ExcelIO，调用了fromJSON之后确实会出现在vueComponent调用destroy钩子时报错的问题。==！

等时钟不成长 · 等时钟不成长

@KevinChen

您好，之前问题描述的不对。
我用咱们给的demo里的例子测试了，也会出现同样的报错，希望您帮忙测试下。

QuickStart.vue做了小幅修改，代码如下：

<template>
<div class="componentContainer" >
<h3>快速入门指南</h3>
<div>
按照以下步骤快速将 Spread Sheets 应用到 Vue 的应用程序中：
<div>
<p>1. 添加 Spread Sheets 产品引用到 Vue 的应用程序中。</p>
<p>2. 添加一个组件来提供数据和业务实现。</p>
<p>3. 绑定数据，并设置其他 Spread Sheets 属性。</p>
<p>4. 添加一些 css 属性来定制外观。</p>
</div>
</div>
<button @click="remove">remove</button>
<div class="spreadContainer" >
<gc-spread-sheets
:hostClass='"spreadHost"'
@workbookInitialized = 'workbookInitialized($event)'>
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
</div>
</div>
</template>
<script>
import "@grapecity/spread-sheets-vue";
export default {
name: "sample-header",
data() {
return {
spread: undefined
};
},
methods: {
workbookInitialized(spread) {
this.spread = spread;
},
remove() {
this.spread.removeSheet(0);
}
}
};
</script>
<style scoped>
.componentContainer {
position: absolute;
padding: 10px;
left: 242px;
top: 0;
bottom: 20px;
right: 0;
}
.spreadContainer {
padding: 10px;
box-shadow: 0 0 20px grey;
}
.spreadContainer {
position: absolute;
left: 0px;
right: 30px;
top: 260px;
bottom: 10px;
}
.spreadHost {
width: 100%;
height: 100%;
}
</style>

复制代码

得到界面如下：

然后新增加一个sheet，如下：

image.png61179808.png

然后点击remove按钮，移除第一个sheet，再点击其他路由，就会报错，如下：

image.png537206420.png

-----------------------------------------------------------------------------------望帮忙解答

等时钟不成长 · 等时钟不成长

还是上面的代码不变，操作步骤变化：
1. 新增一个sheet，然后拖动改变sheet1和sheet2的位置，让sheet2排在前面
2. 然后点击remove按钮，sheet2被移除；
3. 跳转路由，发现并不报错。

KevinChen · KevinChen

您的问题我这边已经报给相关技术人员，明天会给您答复，本帖状态已更改。

		自动登录	找回密码
密码			立即注册

[已处理] vue项目中使用spreadjs

9 个回复

浏览过的版块

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章