devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue Luckyexcel 将文件流转成file文件后使用Luckysheet回显数据 - 附完整示例

作者：Cpp五条 | 2024-04-10 02:11:48

赞

踩

luckyexcel

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

官方文档：快速上手 | Luckysheet文档快速上手 | Luckysheet文档Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。本站包含官方配置文档,API,教程。icon-default.png?t=N7T8https://mengshukeji.gitee.io/luckysheetdocs/zh/guide/

效果

注：因为项目只需要以Excel的形式展示，所以去除了工具栏、顶部信息栏、底部计数栏等配置，更多配置详见官方文档

一、准备工作

 1、安装依赖包

npm install luckyexcel --save

  2、 示例版本 

"luckyexcel": "^1.0.1",

二、使用步骤

1、在index.html文件中引入依赖包

代码如下（示例）：

  1.   <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
  2.   <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
  3.   <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
  4.   <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
  5.   <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
  6.   <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>

2、单文件使用

代码如下（示例）：

import LuckyExcel from 'luckyexcel';

3、调用

代码如下（示例）：

  1. loadExcel() {
  2.       const token = '用户token'
  3.       axios.get('你的接口地址', {
  4.         headers: { 'Token': token },
  5.         responseType: 'blob',
  6.         params: {
  7.           // 参数
  8.         }
  9.       }).then((response) => {
  10.         // 将获取到的文件对象传递给 uploadExcel 方法
  11.         const file = new File([response.data], 'XXX.xlsx', { type: response.data.type });
  12.         console.log(file);
  13.         var files = [];
  14.         files.push(file);
  15.         this.uploadExcel(files);
  16.       })
  17.       .catch((error) => {
  18.         console.error('文件获取失败：', error);
  19.       })
  20.     },
  21.     uploadExcel(files) {
  22.       if (files == null || files.length == 0) return alert('没有文件等待导入');
  23.  
  24.       let name = files[0].name;
  25.       let suffixArr = name.split('.'),
  26.         suffix = suffixArr[suffixArr.length - 1];
  27.       if (suffix != 'xlsx') return alert('目前只支持导入xlsx文件');
  28.         
  29.       LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {
  30.         if (exportJson.sheets == null || exportJson.sheets.length == 0) return alert('读取excel文件内容失败, 目前不支持XLS文件!');
  31.         window.luckysheet.destroy();
  32.  
  33.         window.luckysheet.create({
  34.           data: exportJson.sheets,
  35.           title: exportJson.info.name,
  36.           userInfo: exportJson.info.name.creator,
  37.           container: 'luckysheet', // 设定DOM容器的id
  38.           showtoolbar: false, // 是否显示工具栏
  39.           showinfobar: false, // 是否显示顶部信息栏
  40.           showstatisticBar: false, // 是否显示底部计数栏
  41.           sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
  42.           allowEdit: false, // 是否允许前台编辑
  43.           enableAddRow: false, // 是否允许增加行
  44.           enableAddCol: false, // 是否允许增加列
  45.           sheetFormulaBar: false, // 是否显示公式栏
  46.           enableAddBackTop: false, // 返回头部按钮
  47.           showsheetbar: false, // 是否显示底部sheet页按钮
  48.           enableAddRow: false,//允许添加行
  49.           // 自定义配置底部sheet页按钮
  50.           showsheetbarConfig: {
  51.             add: false,
  52.             menu: false,
  53.           },
  54.         });
  55.       });
  56.     },

三、注意事项

1、一定要给容器设置宽高等样式

  1. <div style="position: relative;height: 100vh;;">
  2.   <div
  3.     id="luckysheet"
  4.     style="padding: 0px; position: absolute; width: 100%; left: 0px; top: 10px; bottom: 10px"
  5.    >
  6.    </div>
  7.  </div>

2、请求接口的时候需要配置 responseType: 'blob'，至少我的这个项目是这样的

responseType: 'blob',

3、接收接口响应回来的数据的处理 { type: response.data.type }，至少我的这个项目是这样的

const file = new File([response.data], 'XXX.xlsx', { type: response.data.type });

tips2、3如果没有配置的话，能够正常请求接口并返回数据，但是不会正常显示excel表格，这是一个不太明显坑。

四、完整示例

index.html

  1. <!DOCTYPE html>
  2. <html lang="zh-cmn-Hans">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7.     <title>XXX</title>
  8.     <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
  9.     <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
  10.     <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
  11.     <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
  12.     <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
  13.     <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>
  14.   </head>
  15.   <body>
  16.     <div id="app"></div>
  17. </html>

LuckyExcel.vue

  1. <template>
  2.   <div style="position: relative;height: 100vh;;">
  3.     <div
  4.       id="luckysheet"
  5.       style="padding: 0px; position: absolute; width: 100%; left: 0px; top: 10px; bottom: 10px"
  6.    >
  7.     </div>
  8.   </div>
  9. </template>
  10.  
  11. <script>
  12.   import LuckyExcel from 'luckyexcel';
  13.   import axios from 'axios';
  14.   
  15.   mounted() {
  16.     this.loadExcel();
  17.   },
  18.  
  19.   methods: {
  20.     loadExcel() {
  21.       const token = '用户token'
  22.       axios.get('你的接口地址', {
  23.         headers: { 'Token': token },
  24.         responseType: 'blob',
  25.         params: {
  26.           // 参数
  27.         }
  28.       }).then((response) => {
  29.         // 将获取到的文件对象传递给 uploadExcel 方法
  30.         const file = new File([response.data], 'XXX.xlsx', { type: response.data.type });
  31.         console.log(file);
  32.         var files = [];
  33.         files.push(file);
  34.         this.uploadExcel(files);
  35.       })
  36.       .catch((error) => {
  37.         console.error('文件获取失败：', error);
  38.       })
  39.     },
  40.     uploadExcel(files) {
  41.       if (files == null || files.length == 0) return alert('没有文件等待导入');
  42.  
  43.       let name = files[0].name;
  44.       let suffixArr = name.split('.'),
  45.         suffix = suffixArr[suffixArr.length - 1];
  46.       if (suffix != 'xlsx') return alert('目前只支持导入xlsx文件');
  47.         
  48.       LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {
  49.         if (exportJson.sheets == null || exportJson.sheets.length == 0) return alert('读取excel文件内容失败, 目前不支持XLS文件!');
  50.         window.luckysheet.destroy();
  51.  
  52.         window.luckysheet.create({
  53.           data: exportJson.sheets,
  54.           title: exportJson.info.name,
  55.           userInfo: exportJson.info.name.creator,
  56.           container: 'luckysheet', // 设定DOM容器的id
  57.           showtoolbar: false, // 是否显示工具栏
  58.           showinfobar: false, // 是否显示顶部信息栏
  59.           showstatisticBar: false, // 是否显示底部计数栏
  60.           sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
  61.           allowEdit: false, // 是否允许前台编辑
  62.           enableAddRow: false, // 是否允许增加行
  63.           enableAddCol: false, // 是否允许增加列
  64.           sheetFormulaBar: false, // 是否显示公式栏
  65.           enableAddBackTop: false, // 返回头部按钮
  66.           showsheetbar: false, // 是否显示底部sheet页按钮
  67.           enableAddRow: false,//允许添加行
  68.           // 自定义配置底部sheet页按钮
  69.           showsheetbarConfig: {
  70.             add: false,
  71.             menu: false,
  72.           },
  73.         });
  74.       });
  75.     },
  76.   }

  欢迎扫码下方二维码关注VX公众号

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/396072
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号