vue 使用插件下载excel表格；文件流下载excel表格

第一种方法：使用插件

1、安装依赖 yarn add xlsx 和 yarn add file-saver
2、在组件中引入

import FileSaver from ‘file-saver’
import XLSX from ‘xlsx’

3、添加下载方法
注意：#out-table为table节点的id

<el-table id="out-table">el-table>

// 导出outTab () {let fix = document.querySelector('.el-table__fixed');let wbif (fix) {wb = XLSX.utils.table_to_book(document.querySelector("#out-table").removeChild(fix));document.querySelector("#out-table").appendChild(fix);} else {wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));}let wbout = XLSX.write(wb, {bookType: 'xlsx',bookSST: true,type: 'array'})try {FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), 'file.xlsx')} catch (e) {if (typeof console !== 'undefined') console.log(e, wbout)}return wbout;}

第二种：后端返回文件流下载

js代码

this.exportList(exporInfo).then((e)=>{console.log('导出列表：',this.exportListData)let blob = new Blob([this.exportListData.data], {type: 'application/vnd.ms-excel'}) let downloadElement = document.createElement('a') // 获取table表格let href = window.URL.createObjectURL(blob); //创建下载的链接downloadElement.href = href;downloadElement.download = this.exportListData.headers.filenames; //下载后文件名document.body.appendChild(downloadElement);// 方法一：跳链接下载(推荐这种方法，可以解决下载之后的表格打不开的问题)let getUrlData = `https://zhbs.fpsd.unionpay.com/jfAdmin/api/v1/order/export?${param(exporInfo)}` // 拼接的跳转路径window.location.href = getUrlData// 方法二：直接正常下载(下载的文件可能会出现打不开的情况)// downloadElement.click(); //点击下载// document.body.removeChild(downloadElement); //下载完成移除元素// window.URL.revokeObjectURL(href); //释放blob对象
})

注意：
1、要下载引入jquery-param插件：import param from 'jquery-param'
2、exportList 为封装的调后端接口的方法
3、blob 为处理后的后端返回的文件流数据
4、a 为 table 表格的 class 类

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！