前言
最近有需求,把 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 成功了。