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

尔嵘

已于 2022-12-16 10:48:53 修改

阅读量4.9k

点赞数 1

分类专栏： Vue2 文章标签：前端 javascript vue.js

于 2022-01-21 14:28:02 首次发布

未经csdn博主（前端-尔嵘）允许不得转载，转载请注明转载路径及说明！

本文链接：https://blog.csdn.net/XU441520/article/details/122620673

版权

本文介绍如何在Vue项目中处理后端返回的二进制Blob文件流，包括直接打开表格和用Excel打开的方式，以及兼容IE、Chrome和Firefox的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明：该导出主要是基于后端做的，前端拿到二进制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