vue2.0 luckyexcel实现后端返回文件流在前端页面显示

搬砖-小子

已于 2023-10-12 18:07:20 修改

阅读量887

点赞数 1

分类专栏： luckyexcel 文章标签：前端

于 2023-09-22 14:06:42 首次发布

本文链接：https://blog.csdn.net/A1643006246/article/details/133167814

版权

luckyexcel 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.引用

npm install luckyexcel

// 本地引入资源包
<link rel='stylesheet' href='<%= BASE_URL %>cdn-jsdelivr/pluginsCss.css' />
<link rel='stylesheet' href='<%= BASE_URL %>cdn-jsdelivr/plugins.css' />
<link rel='stylesheet' href='<%= BASE_URL %>cdn-jsdelivr/luckysheet.css' />
<link rel='stylesheet' href='<%= BASE_URL %>cdn-jsdelivr//iconfont.css' />
<script src="<%= BASE_URL %>cdn-jsdelivr/plugin.js"></script>
<script src="<%= BASE_URL %>cdn-jsdelivr/luckysheet.umd.js"></script>

2.运用

html骨架中定义id为luckysheet1的元素

<div id="luckysheet1" class="luckysheet" style="width:96%;height:99%;margin:0px;padding:0px;"></div>

script中引入以及接收到数据流的后续操作

import LuckyExcel from 'luckyexcel'
// 拿到数据流的处理方法
// 接口请求
async searchClick(){
   let res = await blobExcel(this.params);
   const objectURL = window.URL.createObjectURL(new Blob([res],{type: 'application/zip'})); 
   this.showTable=true;
   this.uploadExcel(objectURL)
},
// 通过luckyexcel进行数据处理并显示
uploadExcel (url) {
  	LuckyExcel.transformExcelToLuckyByUrl(url, 'test3.xlsx', function (exportJson, luckysheetfile) {
	    if (exportJson.sheets == null || exportJson.sheets.length == 0) {
	        alert('Failed to read the content of the excel file, currently does not support xls files!')
	        return
	    }
	    window.luckysheet.destroy()
	    // 配置项
	    window.luckysheet.create({
	      container: 'luckysheet1',
	      data: exportJson.sheets,
	      title: exportJson.info.name,
	      userInfo: exportJson.info.name.creator,
	      lang: 'zh',
	      showinfobar: false,
	      showtoolbar: false,
	      allowEdit: false,
	      allowCopy: false,
	      editMode: true
	    })
  })
},

3.效果展示

在这里插入图片描述

4.在显示过程中遇到的问题

1. luckyexcel 容器一定要给宽高，这样渲染才能看出又没有成功
2. 通过axios进行接口请求文件数据流，数据流会被过滤到catch中，所以在catch中要进行resolve()数据返回
3. 如果在显示过程中报npm下载的资源包内部错误，应该是项目中有些挂载在Array的方法与资源包冲突了