需求:导出记录列表 excel
描述:后端POST接口请求返回文件流,前端处理文件流转换成下载地址并下载
状况:下载可能会超时或者登录失效,需要处理后端返回来的json 数据
download(url, params) {
		axios({
			headers: {
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			method: 'post',
			url: url,
			timeout: 60 * 10 * 1000, // 单独设置超时时间  导出记录太多的话会很慢 防止超时
			data: Qs.stringify(params), 
			responseType: 'blob' // 二进制流文件,一定要设置成blob,默认是json 
		}).then((res) => {
			const data = res.data
			let blob = new Blob([data],{type: 'application/vnd.ms-excel'});   // 文件格式设置
			const r = new FileReader()
			r.readAsText(blob)  //  FileReader的API   必须为readAsText
			r.onload = function(e) {				
				try {
					const resData = JSON.parse(this.result) // this.result为FileReader获取blob数据转换为json后的数据,即后台返回的原始数据  这里获取成功  说明下载出错了
					//以下进行后续处理   根据自己需求修改
					if(resData.code == -2) {   // 这里后台给我返回code=2 代表 登录过期了
						window.localStorage.clear();
						window.sessionStorage.clear();
						ElementUI.Message({
							message: "登录失效",
							type: "warning",
						});
						router.push({
							name: 'login'
						});
						return false;
					}
					
					if(resData.code == -1) { // 这里后台给我返回code=1 代表 服务端报错了
						window.localStorage.clear();
						window.sessionStorage.clear();
						ElementUI.Message({
							message: "服务器内部发生错误了",
							type: "warning",
						});
						router.push({
							name: 'login'
						});
						return false;
					}
				} catch(err) {
					// 下面是正常处理   返回的是文件流
					let fileName = params.excelFileName  // 文件名
					// 兼容ie11
					if(window.navigator.msSaveOrOpenBlob) {
						try {
							const blobObject = new Blob([data])
							window.navigator.msSaveOrOpenBlob(blobObject, fileName+ ".xlsx")  // 记得加文件名 和 文件扩展名
						} catch(e) {
							console.log(e)
						}
						return
					}
					// a标签实现下载
					let url = window.URL.createObjectURL(new Blob([data]))
					let link = document.createElement('a')
					link.style.display = 'none'
					link.href = url
					link.setAttribute('download', fileName+ ".xlsx")
					document.body.appendChild(link)
					link.click()					
				}
			}
			

		}).catch(res => {
             //  ...
		})
	},
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐