excel实现在线编辑功能

1、需求描述

在我们正常的工作需求中会遇到需要我们实现在线便捷excel文档的时候，以前大家大部分是根据onlineoffice的免费api实现在线预览，也可以通过onlineoffice的收费接口进行在线编辑功能，现在我们有了另一个选择，就是根据最近开源的luckysheet组件进行在线编辑，但是由于luckysheet是一个前端项目，所以在此我开发了一个集成luckysheet到vue并且将数据存储到后台服务器数据库的项目，项目仓库位置如下git@gitee.com:hdzxy/online-excel.git以下是搭建时候需要注意的要点

2、luchksheet集成方式及注意事项

Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。

集成方式一： 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>
 

集成方式二：本地引入

<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>

集成注意事项

1、vue项目中集成需要将Luckysheet引入到index.html中，否则会提示TypeError: luckysheet.create is not a function ，github上问题链接github.com/mengshukeji…

2、本地依赖引入只能在项目根目录，我的项目目录为public根目录下，而且打包后应该为dist目录的根目录一样否则页面会无法显示出sheet窗口

3、如果想要从页面加载外部文件到系统中则需要引入"luckyexcel"依赖，引入位置在package.json文件的dependencies模块中引入

{
  "name": "online-excel-web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "codemirror": "^5.59.1",
    "core-js": "^3.6.5",
    "element-ui": "^2.15.0",
    "js-yaml": "^4.1.0",
    "mockjs": "^1.1.0",
    "qs": "^6.10.1",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.6.2",
    "yaml": "^2.1.1",
    "luckyexcel": "^1.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "mockjs": "^1.1.0",
    "node-sass": "^6.0.1",
    "sass": "^1.26.5",
    "sass-loader": "^10.2.0",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

复制代码

3、服务器后端存储注意事项

表格初始化

<script>
    $(function () {
        //配置项
        var options = {
            container: 'luckysheet' ,//luckysheet为容器id
            title: 'Luckysheet Demo', // 设定表格名称
            lang: 'zh' // 设定表格语言
        }
         // 初始化表格
        luckysheet.create(options)
    })
</script>

由于我们需要将文件内容存储到后端服务器的数据库中所以我们需要注意以下几点具体的实现方式大家参考项目代码

1、我们通过luckysheet.getAllSheets() // 得到表的数据，由于数据内容特别长所以数据字段需要设置为longtext字段否则数据存储失败

2、向后台存储数据的时候需要进行json格式化这样数据保存结果就是json字符串，易于我们进行回显展示

 saveExcel() {
      var objsheet = luckysheet.getAllSheets() // 得到表的数据
      console.log("luckysheet======" + luckysheet)
      console.log(this.fileName)
      console.log(this.id)
      var fileContent = JSON.stringify(objsheet);
      this.$axios.post("/sys/sysFile/save", Object.assign({
        id: this.id,
        fileName: this.fileName,
        fileContent: fileContent

      })).then(res => {
        console.log("sucess")
      })

    }

3、前台回显数据库保存内容的时候我们可以采用loadUrl和非loadUrl获取动态数据

配置loadUrl的地址，Luckysheet会通过ajax请求表格数据，默认载入status为1的sheet数据中的所有data，其余的sheet载入除data字段外的所有字段

前端ajax获取json数据，赋值 options.data

var id = this.selected
      console.log("id:" + id)
      this.$axios.post("/sys/sysFile/edit", Object.assign({
        id: id
      })).then(res => {
        this.fileName = res.data.data
        var options = {
          container: 'luckysheet',
          showinfobar: false,
          lang: 'zh'
        }
        //返回数据赋值
        this.fileName = res.data.data.fileName;
        this.id = res.data.data.id
        options.data = res.data.data.fileData;
        options.title = this.fileName
?
        this.isMaskShow = false;
        window.luckysheet.destroy();
        luckysheet.create(options)
      })

后台封装数据需要将数据库中读取的数据转化为jsonarray格式否则展示不出文件内容

@PostMapping("edit")
    public Response<SysFileVO> edit(@RequestBody SysFileDTO sysFileDTO){
        SysFile sysFile = sysFileService.getById(sysFileDTO.getId());
        SysFileVO sysFileVO = new SysFileVO();
        BeanUtils.copyBean(sysFile,sysFileVO);
        sysFileVO.setFileData(JSONArray.parseArray(sysFile.getFileContent()));
        return Response.success(sysFileVO);
    }

作者：念尘雨
链接：https://juejin.cn/post/7143930752218955790
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。