luckysheet 的安装

前言

最近有需求，把 el-table 和 vxe-table 替换为 luckysheet。据说这个可以实现和 excel 的互相复制粘贴，便于用户操作。

官方文档中 Luckysheet 安装有两种方式：

cdn 引入：有可能不是最新的，需要指定版本号。
本地引入。

居然没有 npm 安装，也是很奇特。

因此，我采取了本地引入的方式。

下载 zip 包

从 luckysheet在gitee的地址下载 zip 包，如下图所示：

下载依赖包并打包

zip 下载完毕后，用 vscode 打开，打开终端，输入 npm i 下载依赖包；

包下载完毕后，输入 npm run build 打包；

复制粘贴

打包完毕后，根目录会出现 dist 文件夹。把 dist 中除了 index.html 外的全部文件，复制到目标项目的 public 文件夹中；

并在目标项目的 index.html 中粘贴以下内容：

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

注意：官网推荐的用相对路径引入，但是刷新后会报错。因此推荐用上面的绝对路径引入。

验证

在目标项目新建一个 vue 页面，粘贴以下内容进行测试：

 <template>
   <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
 </template>

 <script>
     export default {
         name: 'HelloWorld',
         data(){
             return {}
         },
         mounted() {
             this.init()
         },
         methods:{
             init() {
               var options = {
                 container: 'luckysheet' //luckysheet为容器id
               }
               luckysheet.create(options)
             }
         }
     }
 </script>

打开终端，输入 npm run dev 运行项目，可看到页面显示如下，且控制台不报错，就说明安装 luckysheet 成功了。