vue3使用luckSheet、lueckExcel一个页面动态渲染多个excel表格并预览

  最近接了个需求，需要前端渲染excel文件，并且预览，我当时就想到了lucksheet和luckexcel，后端返回blob流，直接就可以渲染，相当简单啊。可是后面又说需要在一个页面动态生成多个预览效果，就比较麻烦了。

这是两个库的引入流程，因为我是内网用的本地引入

基于Vue2实现LuckSheet在线预览编辑Excel表格-优快云博客

接下来直接进入正题，因为lucksheet只允许一个页面渲染一个excel，第二个加载的excel就会替换原本的excel导致效果出不来，所以只能用iframe进行沙箱隔离。又因为是动态的所以只能动态添加iframe，不能写死，所以我用了iframe的一个属性srcdoc往里面动态的添加html结构，然后给每个iframe绑定一个ref，通过ref拿到节点传输html结构的sheet数据。

我在mounted里执行的是动态获取的渲染excel个数，如果你们不需要忽略就好，我这里意思就是有几个groupid调几次接口，获取几次excel流。

动态绑定ref

然后再iframe的onload里通过postMassge把获取的流传递给ifram，这一步是关键。

这个方法就是iframe里动态添加html也就是excel的方法，流程就是接收刚才传递的sheet，渲染excel就好了

因为是内网，代码没法复制，有需要的朋友私信我或者有问题的直接问我吧。

最后附上效果视频

效果