vue 两种文档下载方法的实现(后台传递文件流,后台返回文件下载地址)
后台返回文件流1.因为是文件流下载,所以在取后台数据的时候,要多传递一个【responseType: ‘blob’】这个参数,是为了最后数据返回时response的data为【blob】文件格式(data: Blob {size: 22528, type: “application/vnd.ms-excel”}),否则返回的数据只有文件流的结构体,不包含【blob】。下面为封装的获取后台文件流..
后台返回文件流
1.因为是文件流下载,所以在取后台数据的时候,要多传递一个【responseType: ‘blob’】这个参数,是为了最后数据返回时response的data为【blob】文件格式(data: Blob {size: 22528, type: “application/vnd.ms-excel”}),否则返回的数据只有文件流的结构体,不包含【blob】。
下面为封装的获取后台文件流的方式
function downloadPost (config){
return new Promise((resolve,reject) => {
axios({
url: config.url,
method: 'post',
data: config.data,
responseType: 'blob'
}).then(res => {
resolve(res)
}).catch(err=>{
reject(err);
});
});
}
2.将取回来的response直接返回到应用页,通过取到的response去实现文件流转换的制作。我是封装了一个方法,方便多处调用。如果不封装方法的话,直接将实现方法写在返回结果的地方就可以了
下面是调用后台方法的写法
downloadTemplate({responseType: 'arraybuffer'}).then(res=>{
// 文件流转换成xls文件
this.$utils.fileConversion("白名单导入模板.xls",res);
this.$message({type:'success',message:'模板文件已开始下载!'});
})
下面是上面返回结果调用的【fileConversion】的写法
/**
* 字节流转换成文件下载
* inputFileName:文件名
* data:后台取得数据
*/
fileConversion(inputFileName,data){
let str = data.headers['content-disposition'];
// 文件名
let fileName = inputFileName;
let blob = new Blob([data.data], {
type:
"application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
});
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob);
} else {
let elink = document.createElement("a");
elink.download = fileName;
elink.style.display = "none";
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
}
},
以上方法就可以实现后台返回文件流的文档转换了。
需要注意的是,我是通过修改传递的文件名用来控制导出的格式,大家可以参考我的方法实现,如果有更好的方法欢迎评论~~
下面配送控制方式:
if(exportType == 1) {
fileName = "白名单导出数据.xls"
} else {
fileName = "白名单导出数据.csv"
}
通过URL下载文件的话,其实后台请求封装与文件流是一样的,封装的话和文件流也是一样的,传递取回来的response和文件名,我就不一一粘代码了,可以参考上面的方式。(在这里小小备注一下:因为我没有亲测url的方式,所以可能会存在小问题,大家如果试了有什么问题,欢迎评论,我会慢慢修改的~~)
奉上封装方法:
/**
* 从URL里下载文件
* fileName:文件名
* data:后台取得的数据
*/
// 下载文件
downloadFile (fileName,data) {
if (!data) { return }
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url;
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
},
感谢阅读~~
更多推荐
所有评论(0)