模拟postman的send-and-download,前端请求实现

2 篇文章 0 订阅
2 篇文章 0 订阅

当后端接口返回流文件,使用postman的send and download可以直接将文件下载,但是前端应该怎么写接口响应逻辑在这里插入图片描述

exportHandler(data){
	let self = this;
	let params = {
		name: data.name,
		Id: data.id
	};
	//请求接口
	axios({
			method: 'get',
			url:'/export/file',
			params: params,
			responseType: 'blob',//定义接口响应的格式,很重要
		}).then(response => {
			if (!response || !response.data) {
				self.$message({
					type: 'error',
					message: "导出失败!"
				});
				return;
			}
			let blob = new Blob([response.data]);//response.data为后端传的流文件
			let downloadFilename = data.name + ".zip";//设置导出的文件名
			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);
			}
			self.$message({type: "success", message: '导出成功!'});
		
		}).catch(err => {
			self.$message({
					type: 'error',
					message: "导出失败!"
				});
		})
	}

内容参考了其他优秀博客,以上仅业务代码模拟

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值