最近项目开发时想要做一个报表的功能,类似Excel并且集成到项目中。经过查找最终选择使用luckysheet。luckysheet是一款纯JS开源的电子表格。
本次所集成到的项目为vue2项目,采用的引入方式为本地引入。
第一次报错:luckysheet.createisnotafunction这时页面效果是一片空白,打开控制台报错如下:
这个问题主要有两个影响的地方:
1.Luckysheet需要引入到index.html
2.本地依赖引入只能在项目根目录
vue项目需要加到项目入口处,我的项目是在public根目录下的index.html
如上操作后,报错消失了,luckysheet页面确实展示出来了。
然后发现表格没办法操作?看下控制台又有了新的报错。。。。
第二次报错:在查找中发现有人遇到相似的问题,原因可能是js放在head里面,会堵塞DOM的生成。
(如果js放在head里面,就不会出现DOM,所以无法提前渲染,而且提前渲染的前提是发送请求,同步的JS只会卡死GUI渲染,就算发生了paint,也不会渲染到界面上)所以我把JS放到了body下面
然后再次报错,再次渲染失败。
第三次报错:这个其实是jquery的问题。因为我发现项目里有jquery,但是没有在使用luckysheet时用到jquery。
1.jquery要在js文件引入之前
2.路径和引入都要写对,要不然会报错$(...).errorisnotfunction