引入静态资源

为啥我照着葡萄城官网的文档导入css和js文件到vue的脚手架中，控制台e.default is not a constructor。 葡萄城导入css和js文件到vue的脚手架的官方文档： https://demo.grapecity.com.cn/spreadjs/help/docs/UsingSpread.SheetswithVue.html#b

yanxing 发表于 2021-7-12 11:03
百度查了下报的这个错： Unable to preventDefault inside passive event listener invocation.
加了css ...

我这边在控制台没有报错，所有功能都是正常的。建议你提供更多能复现问题的信息

Derrick.Jiao 发表于 2021-7-9 09:15
请你仔细看一下package.json里面的内容

百度查了下报的这个错： Unable to preventDefault inside passive event listener invocation.
加了css样式touch-action:none，还是没效果。

Derrick.Jiao 发表于 2021-7-9 09:15
请你仔细看一下package.json里面的内容

你给我发的vue的葡萄城的demo功能是正常的，但点击excel的表格或者鼠标滚动时，控制台总是报这个错：
gc.spread.sheets.all.min.js?b0a7:12 Unable to preventDefault inside passive event listener invocation.


总是显示gc.spread.sheets.all.min.js里的代码有问题，但看了一下gc.spread.sheets.all.min.js里的代码也没什么问题

yanxing 发表于 2021-7-9 09:04
你这种用@符号的形式，不就是通过npm下载的吗

请你仔细看一下package.json里面的内容


这些包都是需要提前通过npm下载下来保存，然后后续按照上面的配置就可以直接使用了。就像直接使用js那样，你也得下载下来才能用啊。


用@的方式是因为这些包里面存在的相互依赖关系决定了需要这么引入，并不是说一定要用npm才能这么引入

Derrick.Jiao 发表于 2021-7-9 08:38
不能这么引入，这些包都是有相互依赖的关系，参考上面demo的写法，用@的形式。

你这种用@符号的形式，不就是通过npm下载的吗

yanxing 发表于 2021-7-8 20:36
为什么我把你上次发的EXCEL_VUE项目里面Init_Excel.vue页面引入的葡萄城版本号换成14.0.0
控制台报Uncau ...

不能这么引入，这些包都是有相互依赖的关系，参考上面demo的写法，用@的形式。

Derrick.Jiao 发表于 2021-7-8 17:51
请参考这个demo

为什么我把你上次发的EXCEL_VUE项目里面Init_Excel.vue页面引入的葡萄城版本号换成14.0.0
控制台报Uncaught TypeError: e.default is not a constructor
    at Object.eval (gc.spread.sheets.vue.14.0.0.min.js?4ac8:12)
    at c (gc.spread.sheets.vue.14.0.0.min.js?4ac8:12)
    at Object.eval (gc.spread.sheets.vue.14.0.0.min.js?4ac8:12)
    at c (gc.spread.sheets.vue.14.0.0.min.js?4ac8:12)
    at eval (gc.spread.sheets.vue.14.0.0.min.js?4ac8:12)
    at eval (gc.spread.sheets.vue.14.0.0.min.js?4ac8:12)
    at a (gc.spread.sheets.vue.14.0.0.min.js?4ac8:12)
    at eval (gc.spread.sheets.vue.14.0.0.min.js?4ac8:12)
    at Object../src/test/gc.spread.sheets.vue.14.0.0.min.js (app.js:1319)
    at __webpack_require__ (app.js:849)





下面是我改你EXCEL_VUE项目里面Init_Excel.vue页面的代码

1. <template>
   
2.     <div class="home">
   
3.         <div class="toolbar">
   
4.             <input type="file" class="el-button" @change="importExcel($event)"/>
   
5.             <el-button @click="exportExcel()">导出 Excel</el-button>
   
6.          
   
7.         </div>
   
8. 
   
9.         <div class="spreadWrapper" v-show="isShow">
   
10.             <div>spread1</div>
    
11.             <gc-spread-sheets class="spreadHost" @workbookInitialized="workbookInitialized($event)">
    
12.                 <gc-worksheet></gc-worksheet>
    
13.             </gc-spread-sheets>
    
14.         </div>
    
15.         <!-- <div class="spreadWrapper" v-show="ishide">
    
16.             <div>spread2</div>
    
17.             <gc-spread-sheets class="spreadHost" @workbookInitialized="workbookInitialized1($event)">
    
18.                 <gc-worksheet></gc-worksheet>
    
19.             </gc-spread-sheets>
    
20.         </div> -->
    
21.     </div>
    
22. </template>
    
23. 
    
24. 
    
25. <script>
    
26.     import Vue from "vue";
    
27.     // import "../../public/static/gc.spread.sheets.excel2013white.14.1.0.css";
    
28.     // import '../../public/static/gc.spread.sheets.vue.min.js';
    
29.     // import * as GC from "../../public/static/gc.spread.sheets.all.14.1.0.min.js";
    
30.     // import * as ExcelIO from "../../public/static/gc.spread.excelio.14.1.0.min.js";
    
31.     // import '../../public/static/gc.spread.sheets.charts.`14.1.0.min.js';
    
32.     // import "../../public/static/gc.spread.sheets.resources.zh.14.1.0.min.js";
    
33.     // import "../../public/static/gc.spread.sheets.barcode.14.1.0.min.js";
    
34. 
    
35.     // import FileSaver from "file-saver";
    
36.     // import "../test/gc.spread.sheets.excel2013white.14.1.0.css";
    
37.     // import aa from '../test/gc.spread.sheets.vue.min.js';
    
38.     // import * as GC from "../test/gc.spread.sheets.all.14.1.0.min.js";
    
39.     // import * as ExcelIO from "../test/gc.spread.excelio.14.1.0.min.js";
    
40.     // import '../test/gc.spread.sheets.charts.14.1.0.min.js';
    
41.     // import "../test/gc.spread.sheets.resources.zh.14.1.0.min.js";
    
42.     // import "../test/gc.spread.sheets.barcode.14.1.0.min.js";
    
43. 
    
44. 
    
45.     import FileSaver from "file-saver";
    
46.     import "../test/gc.spread.sheets.excel2013white.14.0.0.css";
    
47.     import aa from "../test/gc.spread.sheets.vue.14.0.0.min.js";
    
48.     import * as GC from "../test/gc.spread.sheets.all.14.0.0.min.js";
    
49.     import * as ExcelIO from "../test/gc.spread.excelio.14.0.0.min.js";
    
50.     import '../test/gc.spread.sheets.charts.14.0.0.min.js';
    
51.     import "../test/gc.spread.sheets.resources.zh.14.0.0.min.js";
    
52.     import "../test/gc.spread.sheets.barcode.14.0.0.min.js";
    
53.    
    
54.    
    
55.    
    
56.     GC.Spread.Common.CultureManager.culture("zh-cn");
    
57.    
    
58.     export default {
    
59.         data () {
    
60.            
    
61.             return {
    
62.                isShow:true,
    
63.                 ishide:false
    
64.             }
    
65.         },
    
66.         
    
67.         methods: {
    
68.             workbookInitialized(spread){
    
69.                 this.spread = spread;
    
70.                 var sheet = this.spread.getActiveSheet();
    
71.                
    
72.             },
    
73. 
    
74.             importExcel(event) {
    
75.                 const file = event.target.files[0];
    
76.                 let self = this;
    
77.                 let excelIO = new ExcelIO.IO();
    
78.                 excelIO.open(file, (spreadJSON) => {
    
79.                     if (self.spread) {
    
80.                         self.spread.fromJSON(spreadJSON);
    
81.                     }
    
82.                 });
    
83.                
    
84.             },
    
85. 
    
86.             hide(){
    
87.                 this.ishide = !this.ishide;
    
88.                 this.isShow=!this.isShow;
    
89.             },
    
90.             exportExcel() {
    
91.                 let self = this;
    
92.                 if (self.spread) {
    
93.                     let spreadJSON = JSON.stringify(self.spread.toJSON());
    
94.                     let excelIO = new ExcelIO.IO();
    
95.                     excelIO.save(spreadJSON, (blob)=>{
    
96.                         FileSaver.saveAs(blob, "export.xlsx");
    
97.                     })
    
98.                 }
    
99.             }
    
100.         }
     
101.     }
     
102. </script>
     
103. 
     
104. <!-- Add "scoped" attribute to limit CSS to this component only -->
     
105. <style scoped>
     
106. 
     
107.     .home,
     
108.     .spreadWrapper {
     
109.         height: 90%;
     
110.     }
     
111.     .spreadHost {
     
112.         height: 90%;
     
113.         width: 100%;
     
114.     }
     
115.     .toolbar {
     
116.         padding-bottom: 10px;
     
117.     }
     
118.     .el-button{
     
119.         /*padding-bottom: 5px;*/
     
120.         height: 50px;
     
121.     }
     
122.    a{
     
123.        float: right;
     
124.        text-decoration: none;
     
125.        margin-right: 10px;
     
126.        line-height: 56px;
     
127.    }
     
128. 
     
129. </style>
     

复制代码

yanxing 发表于 2021-7-8 14:27
你这边像这种引入方式，14.0版本的vue-cli的demo有吗，能给我看下吗。14.0版本的你现在你那边测下能否正 ...

没有 这边需要整理一下 整理完成后会在本帖更新

Derrick.Jiao 发表于 2021-7-8 14:18
可以通过静态方式引入，具体这边可能需要调研一下，此贴先给您改为保留处理，有进展这边会在本帖更新。

你这边像这种引入方式，14.0版本的vue-cli的demo有吗，能给我看下吗。14.0版本的你现在你那边测下能否正常跑通，然后再发给我

yanxing 发表于 2021-7-8 14:12
我这边看了下，我的环境没什么问题。我同事电脑跑你这个deom也报：This dependency was not found:

*  ...

可以通过静态方式引入，具体这边可能需要调研一下，此贴先给您改为保留处理，有进展这边会在本帖更新。