vue实现导出二进制流(blob)文件（get请求）

Posted 2022-06-07 尔嵘

说明：该导出主要是基于后端做的，前端拿到二进制blob文件流

方法一：导出后直接打开的是表格

handleExport() 
	let _this = this;
	if (_this.exportIds.length == 0) 
		return _this.$message.info("暂无选择要导出的数据");
	
	axios.get("https://********/****/export.do", 
		params: 
			ids: _this.exportIds.join(","),
			_t: new Date().getTime()
		,
		responseType: "blob" // 1.首先设置responseType对象格式为 blob:
	).then(res => 
			//resolve(res)
			// 2.获取请求返回的response对象中的blob 设置文件类型，这里以excel为例
			let blob = new Blob([res.data], 
				type: "application/vnd.ms-excel"
			);
			// 3.创建一个临时的url指向blob对象
			let url = window.URL.createObjectURL(blob);
			// 4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
			let a = document.createElement("a");
			a.href = url;
			a.download = "导出数据_" + new Date().getTime() + ".xlsx"; //自定义导出文件名
			a.click();
			// 5.释放这个临时的对象url
			window.URL.revokeObjectURL(url);
			return _this.$message.success("导出成功");
		,
		err => 
			resolve(err.response);
		
	).catch(error => 
		reject(error);
	);

方法二：导出后需要用execl打开

handleExport() 
	let _this = this;
	if (_this.exportIds.length == 0) 
		return _this.$message.info("暂无选择要导出的数据");
	
	 axios(
	 	method: 'get',
	 	url: 'https://******e/export.do',
	 	responseType: 'blob',
	 	params:  ids: _this.exportIds.join(","), _t: new Date().getTime() 
	 ).then((res) => 
	 	if (res.code != 0) 
	 		_this.loading = false;
	 		return _this.$message.error(res.msg);
	 			
	     let blob = new Blob([res.data], 
	 	 type: 'application/vnd.ms-excel',
	     );
	 	let link = document.createElement('a')
	 	let body = document.querySelector('body')
	 	link.href = window.URL.createObjectURL(blob) // 
	 	link.style.display = 'none' // 让这个a标签不可见
	 	link.download = '导出文件'  //文件名称
	 	body.appendChild(link)
	 	link.click()        // 创建了新的a标签之后模拟点击事件，开始传输文件
	 	body.removeChild(link)  // 下载完成之后，移除按钮，垃圾回收，减少页面内存消耗
	    window.URL.revokeObjectURL(link.href)   // 移除之前使用createObjectURL创建的URL，垃圾回
	    return _this.$message.success("导出成功");
	 );

方法三: 兼容IE和谷歌、火狐浏览器

//导出兼容ie浏览器
				handleExport() 
					let _this = this;
					if (_this.exportIds.length == 0) 
						return _this.$message.info("请选择要导出的数据!");
					
					axios(
						url: "8888888",
						method: "get",
						responseType: 'blob', //文件流数据一定要写
						params: 
							ids: _this.exportIds.join(","),
							_t: new Date().getTime()
						,
					).then(res => 
						const blob = new Blob([res.data]); //处理文档流
						const fileName = '发票管理.xlsx'; //导出后的文件名
						if (!!window.ActiveXObject || "ActiveXObject" in window || window.navigator.userAgent
							.indexOf('Edge/') > 0)  //判断是不是ie的浏览器
							window.navigator.msSaveOrOpenBlob(blob, fileName);
							console.log('ieeeeee')
						 else 
							const elink = document.createElement('a');
							elink.download = fileName;
							elink.style.display = 'none';
							elink.href = URL.createObjectURL(blob);
							document.body.appendChild(elink);
							elink.click();
							URL.revokeObjectURL(elink.href); // 释放URL 对象
							document.body.removeChild(elink);
							console.log('noieeeee')
						
					).catch(err => 
						console.log(err)
					)