Vue实现在线编辑excel

最新推荐文章于 2024-07-29 11:18:34 发布

web13721570701

最新推荐文章于 2024-07-29 11:18:34 发布

阅读量6.7k

点赞数

分类专栏：前端 html 面试文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/web13721570701/article/details/123054418

版权

本文介绍了如何在Vue项目中使用Luckysheet插件实现Excel在线预览和编辑功能。首先，通过在HTML头部引入Luckysheet并安装相关依赖。接着，声明组件并调用下载及编辑保存函数，将后台返回的文件流转化为Blob对象渲染。最后，通过excelJs将编辑后的DOM转换回文件流，实现Excel的上传和更新。文章还提及了其他可选的在线编辑解决方案，如wpsJs和SpreadJS。

摘要由CSDN通过智能技术生成

luckysheet

1.插件引入

2.声明excel在线预览编辑组件

3.excelJs分解Dom为excel文件流

luckysheet文档地址

exceljs文档地址

前言介绍：原先平台没有要求在线编辑excel功能，excel文件是表单新增记录展现表格信息的一条记录信息，用于展示excel文件名称，支持下载功能，后续可能是客户嫌弃文件下载网速过慢，所以要求支持在线预览和编辑功能。项目周会讨论时提到这个需求，我当时的第一反应是这个功能前端来做的话，从18年开始网上生态情况，开源插件很少，功能支持完善较好的似乎都是收费的，所以当时会议就说明，实现这个功能就两种情况，公司对这个项目平台能不能支持收费插件，不能的话只能做网上找开源做阉割版。后续讨论，对这个功能采取使用不收费的插件。

_，那能怎么办，作为开发那就是搬轮子造轮子呗，网上文档查询一波，发现2021了关于这方面的技术方案和开源插件都友好很多，_点进来的小伙伴如果公司支持收费插件的话，可以试试这几个方案

wpsJs、石墨文档、腾讯文档、__spreedJs

luckysheet

官方示例项目地址：Luckysheet: ??Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。

这里后面我就直接贴代码了，因为前言时说了，在线编辑预览是新增功能，所以花费时间和改动地方越少越好，原先excel文件导出功能是后台java根据模板接口返回文件流，然后前端转换二进制Blob数据对象导出的，这里功能接入就前端做下改动，没要求后端跟着同步照着luckysheet官方给出的方案做在线编辑功能。

1.插件引入

Vue引入luckysheet，index.html头部标签head中引入

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@2.1.12/dist/plugins/css/pluginsCss.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@2.1.12/dist/plugins/plugins.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@2.1.12/dist/css/luckysheet.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@2.1.12/dist/assets/iconfont/iconfont.css' />
    <script src="https://cdn.jsdelivr.net/npm/luckysheet@2.1.12/dist/plugins/js/plugin.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/luckysheet@2.1.12/dist/luckysheet.umd.js"></script>

然后package.json中添加两项依赖

"exceljs": "^4.2.0",
"luckyexcel": "^1.0.0",

2.声明excel在线预览编辑组件

<template>
  <div class="onlineExcel">
    <el-card block fill shadow="never" :body-style="{ height: '100%' }">
      <div class="fill flex-column">
        <!-- 自定义操作栏 -->
        <div class="flex-h fn-flex mar-b-xs">
          <div class="fn-header__btn text-left">
            <el-button
              type="primary"
              :disabled='this.fileurl.length === 0'
              @click="SaveExcel"
              >保存
            </el-button>
          </div>
        </div>
        <div
          id="luckysheet"
          class="flex-1 "
        ></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import LuckyExcel from 'luckyexcel';
import { uploadDoc, downloadDoc