vue项目使用luckyexcel预览excel表格

场景

最近工作中在开发文档上传并能在新窗口打开预览的功能。在此记录下心路历程。

方法

我总共尝试了2种方法预览excel，均可实现。还发现一种方法可以实现，需要后端配合，叫做KKfileview。

1.使用luckyexcel插件实现xlsx的预览

2.使用file-viewer插件实现xlsx的预览

3.使用KKfileview插件实现xlsx的预览

实现

方法一：使用luckyexcel插件

温馨提示：需要用到luckysheet和luckyexcel，根据下面步骤一步一步操作会避免踩坑，比如我当时遇到了window.luckysheet is not defined控制台报红的问题。

第一步：vue项目引入luckysheet的相关依赖（这也是上面提到的如果没有引入会报红window.luckysheet找不到的问题）

public文件夹下的index.html里引入luckysheet的相关依赖，由于考虑到我所做的这个项目可能会内网部署，所以将这些依赖包放在了public文件夹下的static文件夹里新建了一个luckysheet文件夹，这些依赖包的来源是我先npm install luckysheet --save把包拉下来，然后去拷贝的。文件存放位置和引入代码如下图。当然也可以选择cdn引入的方式。

<link rel='stylesheet' href='./static/luckysheet/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./static/luckysheet/plugins/plugins.css' />
<link rel='stylesheet' href='./static/luckysheet/css/luckysheet.css' />
<link rel='stylesheet' href='./static/luckysheet/assets/iconfont/iconfont.css' />
<script src="./static/luckysheet/plugins/js/plugin.js"></script><