“持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情”
前言
Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。
目前在做自定义报表这块，并选定 luckysheet 来作为我们的自定义报表组件使用。其相关的前端文章看的较多，且上手起来效果也比较快，但有关前后端如何对接，如何保存数据，并如何应用于实战中，这方面的文章则非常的少。而今天就来抱着前后端联调实战的目的，搞定这款组件的应用。
参考文档：
一、前端引入
1.1 引用 LuckySheet
目录 luckysheet 不支持 npm 安装包使用。只支持下面两种依赖方式：
1.1.1 CDN 引入
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>
不过，最近这域名被拦截了，无法访问。只能通过本地引入了。
1.1.2 本地引入
本地引入可以减少 IO 资源的消耗，避免网络不稳定导致出现问题。因此在项目开发中使用这种模式。
从官网下载源码：gitee.com/mengshukeji…。
1、打开当前目录下 cmd 命令，运行 npm install ，安装所需依赖
2、运行 npm run build 。执行后生成的 dist 文件夹中的内容 （除了 index.html）复制到我们项目目录中。
3、新建 Vue 项目（打开已有 Vue 项目）
在public 目录下粘贴过来这些文件。
4、在project 的原 html 下面添加引用 js
<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>
5、然后再根据官网的要求，进行相关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>
<style>
</style>
6、如果新项目，一般就能访问成功。
1.2 问题及解决
首先，这块本地依赖导入的遇到的几个常见问题，踩了很多坑，这里记录下。
1.2.1 cdn 依赖引入问题
cdn 目前域名被墙，无法访问，所以导致 lucksheet.create 出现问题。所以之前使用的方式一就无法使用。
1.2.2 未知 token < 问题
这个问题，可以看到都是两个 script 出现的问题，这里就需要注意自己项目的 publicPath 是怎样配置的。我的项目中并不是 / ，而是 /subAdmin。
module.exports = {
// 基本路径
publicPath: "/subAdmin",
}
所以，所以需要把我们的路径引用采用 项目路径的方式导入，也因为本身项目是 history 模式，所以在配置中使用绝对路径来配置。
记住 CSS 等样式也要用项目路径和绝对路径来完成，不然刷新后样式会失效。
最终的依赖模式：
<link rel='stylesheet' href='<%= BASE_URL %>/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='<%= BASE_URL %>/plugins/plugins.css' />
<link rel='stylesheet' href='<%= BASE_URL %>/css/luckysheet.css' />
<link rel='stylesheet' href='<%= BASE_URL %>/assets/iconfont/iconfont.css' />
<script src="<%= BASE_URL %>/plugins/js/plugin.js"></script>
<script src="<%= BASE_URL %>/luckysheet.umd.js"></script>
