vue axios post形式下载zip文件流

2024年5月18日 175次阅读 来源: RanGe*

axios以post形式发送请求, 获取zip文件流下载到本地

downloadFile() { 
	var reqData = qs.stringify({  // form-data格式的数据
	  fileIds: "98g8349g-2343jkng8s98fga-324rkjgq"
	});
	axios
	  .post("/api/download/zip1", reqData, {  // url中/api是前端解决跨域问题的
	    headers: {  // 这里需要使用form-data格式数据发送请求
	      "Content-Type": "application/x-www-form-urlencoded"
	    },
	    responseType: "blob" // 下载zip文件需要使用的响应格式,这是区别于普通post请求的地方,重点!!!
	  })
	  .then(response => { 
	    var zipName = "Bulk_Download"; // 下载的文件名
	    let blob = new Blob([response.data], {  type: "application/zip" }); // 下载格式为zip
	    if ("download" in document.createElement("a")) { 
	       非IE下载
	      let elink = document.createElement("a"); // 创建一个<a>标签
	      elink.style.display = "none"; // 隐藏标签
	      elink.href = window.URL.createObjectURL(blob); // 配置href
	      elink.download = zipName;
	      elink.click();
	      URL.revokeObjectURL(elink.href); // 释放URL 对象
	      document.body.removeChild(elink); // 移除<a>标签
	    } else { 
	      //IE10+
	      navigator.msSaveBlob(blob, zipName);
	    }
	  })
	  .catch(error => { 
	    console.log("download error (batch)");
	    console.log(error);
	  });
}

如果是单独下载, 可以使用window.open()方法进行下载, 默认window.open会在浏览器中打开一个新的标签页, 不是很友好, 这里配置的”_self”就是在当前标签页打开下载, 还是比较有好的

window.open( "/api/download/" , "_self" );

当然当前页打开页面的方法还有很多, 自己选择一个喜欢的就可以

self.location.href="/url" // 当前页面打开URL页面
location.href="/url" // 当前页面打开URL页面
windows.location.href="/url" // 当前页面打开URL页面，前面三个用法相同。
this.location.href="/url" // 当前页面打开URL页面
parent.location.href="/url" // 在父页面打开新页面
top.location.href="/url" // 在顶层页面打开新页面

又是没有bug的一天 美滋滋

    原文作者：RanGe*
    原文地址: https://blog.csdn.net/weixin_41601114/article/details/106373982
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞