前言
在开发项目中遇到需要导出列表的功能，一开始是前端做的，后来leader说要改成后台做，那么办法就是后台返回文件流然后前端执行下载。
前端做导出请移步vue-xlsx 导出数据公共组件
接受后台返回的文件流请接着往下看
后台返回来的数据流其实是二进制格式的文件，所以可以用blob接收
第一种方法Blob对象下载文件流
首先要使用这个对象就要先了解这个对象，所以，
想了解blob的请移步web-api-blob
api介绍的很详细，我就不介绍了。
了解完了之后，基本上知道咋回事了，然后直接上代码，记录下来方便以后使，我这里是vue-cli的项目，所以我封装了公共方法，那个页面使用直接调用就可以了。
step 一，在公共得js内创建自己的方法
export function export_excel_file(export_data,list_name){
let link = document.createElement("a");
// type就是blob的type,是MIME类型的，可以自己查看MIME类型都有哪些
let blogw = new Blob([export_data],{type:"application/vnd.ms-excel;charset=utf-8"})
let objectUrl = window.URL.createObjectURL(blogw); //创建一个新的url对象
link.href = objectUrl;
let file_name = `${moment().format('YYYY-MM-DD HH:mm:ss')}的${list_name}列表.xlsx`;
link.download = file_name; // 下载的时候自定义的文件名
link.click();
window.URL.revokeObjectURL(objectUrl); //为了更好地性能和内存使用状况，应该在适当的时候释放url.
}
step 二，在需要引用引用的页面调用这个方法就阔以了。
import { moneyFormat, export_excel_file } from "@/utils";
//这个是封装好的接口数据
import {
withDrawList,
approved,
reject,
admin_withdraw_export,
} from "@/api/finance";
export default {
data(){
return:{}
},
methods:{
export_excel_file,
// 订单导出
exportOrderList() {
this.listLoading = true;
admin_withdraw_export(this.listQuery)
.then((response) => {
let list_name = "提现";
this.export_excel_file(response, list_name);
this.listLoading = false;
})
.catch(() => {
this.listLoading = false;
this.$message({
message: "导出失败",
type: "error",
center: true,
duration: "2000",
});
});
},
}
}
重要的提示一定要在自己封装好的接口中加入
'responseType':"arraybuffer",这个参数，否则下载下来的就是乱码。
import request from '@/utils/request'
// 提现列表
export function withDrawList(data) {
return request({
url: '/admin/workerWithDraw/admin-page',
method: 'post',
data
})
}
// 提现-导出
export function admin_withdraw_export(data) {
return request({
url: '/admin/workerWithDraw/admin-export',
method: 'post',
data,
'responseType':"arraybuffer",
})
}
正常的axios请求是这样写
this.axios.post(baseUrl,Params,{'responseType':"arraybuffer"}).then(response=>{
let list_name = "提现";
this.export_excel_file(response, list_name);
})
第二种方法使用插件js-file-download下载文件流
step 一，下载安装这个插件
npm install js-file-download --save
step 二，在需要引用的页面引入,这方法也是需要接口传入'responseType':"arraybuffer"参数
import fileDownload from "js-file-download";
fileDownload(response,'dsdasd.xls');
结束语
这里做个笔记，便以后学习，后期还有学到的导出的知识还会更新。
