vue 实现在线预览Excel-LuckyExcel/LuckySheet实现方案

一、准备工作

1. npm安装 luckyexcel

npm i -D luckyexcel

2.引入luckysheet

注意：引入luckysheet，只能通过CDN或者直接引入静态资源的形式，不能npm install。

个人建议直接下载资源引入。我给你们提供一个下载资源的地址：

https://gitee.com/ichiva_admin/luckysheet-saved-in-recovery/tree/master/src/main/resources/static/module/luckysheel-2.1.13

直接放进工程的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>

注意：自行整理下路径，不要错了。

准备工作完毕了。

二、预览Excel

由于后台给到的数据，就是二进制数据。因为他们导出和预览实际上用的是同一个接口。那么，我们需要将二进制数据解析为文件对象，通过luckyexcel的方法转变为json对象，然后通过luckysheet显示出来。

1.准备显示dom

<div id="luckysheet" style="width: 800px; height: 600px;"> </div>

<!-- 

需要注意两点
1.id 要记住，下边初始化excel会使用容器id；
2.容器的宽高要设置好，否则显示不出来；

 -->

2.请求接口

import axios from 'axios';

// 预览 请求excel二进制数据
axios.get({
    url: '你的后台请求地址'，
    params: '参数',
    methods: 'post',
    responseType: 'blob' // 注意  这一步很关键  必须注明请求的数据类型是blob
})

3.解析数据

import LuckyExcel from "luckyexcel";

// 假设我们的请求接口时  getExcelData

// 以下方法是具体处理逻辑

async getExcel () {
    try {
        const res = await getExcelData('你的参数');
        const files = new window.File([res], '你的文件名称', {type:"application/vnd.ms-excel;charset=utf-8"});
        LuckyExcel.transformExcelToLucky(files, exportJson => {
          if (!exportJson.sheets || exportJson.sheets.length === 0) {
            ElMessage.warning('读取excel文件内容失败');
            return;
          }
          // 调用初始化方法
          this.initExcel(exportJson, '你的文件名称');
        }) 
    } catch (err) {

    }
},

// 初始化对象
initExcel (json, title) {
    this.$nextTick(() => {
        // 先销毁 避免反复创建
        luckysheet.destory();

        // 创建表单
        lucky.create({
            container: '你的渲染容器的id', // 比如 <div id="渲染容器的id" style=""></div>
            lang: 'zh', // 中文
            title, // 标题
            data: json.sheets,// excel的sheet数据
        })
    })
},

如上两步，就可以显示项目预览excel的需求了。

如果觉得这个预览excel不合口味，也可以看看我的另一篇文章：

vue 预览excel文件的又一伟大实践 —— vue-office-CSDN博客