Vue element ui结合java后台导出Excel(二进制文件流)
Vue结合后台详解导入导出Excel问题
今天讲讲 前台Vue配合后台(java)导出Excel 后台返回的数据是 二进制文件流 如何将此变为 弹框下载
当时开发呢,我们后台是java 有控件 可以直接将数据导出并生成Excel文件,但是前后台传输是不可能直接传输文件的,是以二进制文件流进行传输的,此时呢就会遇到一个问题,因为是后台,必然会涉及到权限,权限就涉及到token,token传输就会出现限制问题,所以我会列出三种方法
我的是Vue项目~~
1.不需要token的方法
<template>
<div>
<el-button @click="downloadFile" type="primary">导出 Excel</el-button>
<iframe id="ifile" style="display:none"></iframe>
</div>
</template>
<script>
methods:{
// 导出 Excel
downloadFile() {
var dom=document.getElementById('ifile');
dom.src= this.downloadFileUrl +`/pay/exportExcel?userId=${
this.form.userId}&orderNumber=${
this.form.orderNumber}&stime=${
this.form.stime}&etime=${
this.form.etime}&status=${
this.form.status}&payChannel=${
this.form.payChannel}`;
}
},
</script>
这个的意思呢就是写一个类似的隐藏域 ifram 标签独有的特性 , 不明白的可以去W3cschool 查一查, 后面拼接的参数就是导出条件,按个人需要进行,这个亲测有效!
2.第二种就涉及到token了 , 就是使用javascript的内置对象来解析,方法就是使用axios请求 请求过来的二进制文件流进行解析
// 导出 Excel
downloadFile() {
// 这是methods中的方法
downLoadPayListFn({
...this.form}).then(res => {
// 这个是我封装的方法 就是通过axios请求进行拦截 添加token form是data中的数据 也就是筛选条件
const fileName = '测试表格123.xls';
if ('download' in document.createElement('a')) {
// 非IE下载
const blob = new Blob([res], {
type: 'application/ms-excel'});
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
}
})
},
这个blob是js的内置对象 就是将其转化为文件 详情解释可以去查 blob
import fetch from 'utils/fetch';
import Qs from 'qs';
// 导出数据
export function downLoadPayListFn(obj) {
return fetch({
url: '/admin/pay/exportExcel',
method: 'get',
params: obj,
responseType: 'blob',
/* header: {
'Content-Type': "application/x-www-form-urlencoded; charset=utf-8"
} */
});
}
在这里一定要加上 responseType: 'blob',否则不会生效 切记!!!!
看网上写的是这个样子 当然也根据后台返回给你的数据进行展示 我们后台返回的数据没有进行包装 所以直接就是response,搞就完事了.
3.第三种方法 使用form 表单提交 隐藏域使用
<template>
<div id="rechargeRecord">
<!-- 支付管理 -->
<div class="title">
<el-form label-width="100px">
<form class="form" :action="downloadFileUrl+`/pay/exportExcel`" method="post">
<input type="hidden" name="userId" :value="form.userId"> <!-- 用户id -->
<input type="hidden" name="orderNumber" :value="form.orderNumber"> <!-- 订单单号 -->
<input type="hidden" name="stime" :value="form.stime"> <!-- 时间 -->
<input type="hidden" name="etime" :value="form.etime"> <!-- 时间 -->
<input type="hidden" name="status" :value="form.status"> <!-- 交易状态（1开始，2进行中，3失败，4成功） -->
<input type="hidden" name="type" :value="form.type"> <!-- 支付类型（1.扣除 2.返还 3.转换 4.赠送） -->
<input type="hidden" name="ctimeState" :value="form.ctimeState"> <!-- 创建时间状态（1：正序、2：倒序） -->
<input type="hidden" name="payChannel" :value="form.payChannel"> <!-- 支付渠道 -->
<input type="hidden" name="token" :value="token"> <!-- 支付渠道 -->
<input type="submit" value="导出 Excel" @click="submitBtn(event)" class="submit" >
</form>
</el-form>
</div>
</div>
</template>
<script>
import {
getPayListFn, downLoadPayListFn } from 'api/game/money/rechargeRecord';
import {
mapGetters } from "vuex";
import {
getToken } from "utils/auth.js"; // 这是我自己封装的方法 获取token的方法
export default {
data(){
return{
form: {
pageIndex: 1, // 当前页数
pageSize: 10, //请求行数
userId: '', // 用户id
orderNumber: '', // 订单单号
stime: '', // 创建时间（开始）
etime: '', // 创建时间（结束）
status: '', // 交易状态（1开始，2进行中，3失败，4成功）
type: '', // 支付类型（1.扣除 2.返还 3.转换 4.赠送）
ctimeState: '', // 创建时间状态（1：正序、2：倒序）
payChannel: '', // 支付渠道
},
token: getToken() , // 这里获取token
}
},
// 页面一加载的时候
created() {
this.getdata();
},
methods:{
submitBtn(e) {
e.preventDefault(); // 这个必须要有, 不然不生效
return false; // 这个必须要有, 不然不生效
}
},
}
</script>
<style rel="stylesheet/scss" scoped>
.form {
display: inline-block;
border-color: #20a0ff;
margin-left: 0.6rem;
}
.submit {
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #c4c4c4;
color: #1f2d3d;
margin: 0;
padding: 10px 15px;
border-radius: 4px;
border-color: #20a0ff;
}
</style>
这个就需要后台配合配置一下网关,如果有header中有token的话就去header中取 没有的话就去参数中取,这个亲测好使。