前端模拟实现postman的send-and-download进行文件下载
今天在合后端做需求的时候,后端返文件流的形式前端解析并下载后端接口返回文件流,使用postman的send and download可以直接将文件下载主要参考第二种1.刚开始的时候是这种下载后端返URL前端直接进行下载,创建a标签并下载exportArcelAttachment({..._this.args.search}).then(function (res){let ulrs = res.d
·
今天在合后端做需求的时候,后端返文件流的形式前端解析并下载
- 后端接口返回文件流,使用postman的send and download可以直接将文件下载
主要参考第二种
1.刚开始的时候是这种下载
后端返URL前端直接进行下载,创建a标签并下载
exportArcelAttachment({..._this.args.search}).then(function (res){
let ulrs = res.data //这块返的直接是个URL链接
let link = document.createElement('a')
link.style.display = "none"
link.href = ulrs
link.setAttribute('download', 'product.xls')
document.body.appendChild(link)
link.click()
})
2.后来改成现在的下载模式了
注意这块在请求的时候加上请求头
responseType : 'blob',
export const exportSupplement = (params) => { //批量导出
return axios.request({
url: '/logistics-engine/arcelreconciliation/exportSupplement',
responseType : 'blob', //重要
method: 'post',
data: {
args: JSON.stringify(params)
}
})
}
exportSupplement({..._this.args}).then(function (res) { //导出流
console.log(res,'导出')
let blob = new Blob([res.data]);//response.data为后端传的流文件
let downloadFilename = '小包对账数据'+ _this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')+ ".xlsx";//设置导出的文件名 用moment时间插件对文件命名防止每次都是一样的文件名
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
//兼容ie浏览器
window.navigator.msSaveOrOpenBlob(blob, downloadFilename)
}else {
//谷歌,火狐等浏览器
let url = window.URL.createObjectURL(blob);
let downloadElement = document.createElement("a");
downloadElement.style.display = "none";
downloadElement.href = url;
downloadElement.download = downloadFilename;
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement);
window.URL.revokeObjectURL(url);
}
_this.$Message.success('导出成功!')
}).catch(function (err) {
console.log(err)
}).finally(function () {
_this.tableLoading = false;
})
更多推荐
已为社区贡献11条内容
所有评论(0)