jquery ajax、 axios 下载文件

漫天绯羽

已于 2024-06-18 11:21:02 修改

阅读量423

点赞数 3

文章标签： jquery ajax okhttp

于 2024-03-06 17:05:13 首次发布

本文链接：https://blog.csdn.net/qq_36762151/article/details/136511057

版权

本文介绍了在从axios切换到原生XMLHttpRequest进行文件流下载时遇到的问题，包括jQuery$.ajax不适用、预览/下载为空以及如何设置请求头和解析文件名。作者提供了详细的步骤和解决方法。

摘要由CSDN通过智能技术生成

用多了axios 的下载文件，突然使用原生的有点蒙；jquery 中的$.ajax() 是使用不了的，具体原因：【记录避坑AJAX处理文件流】为什么预览/下载文件是空白的？（含过程和解决方法）_jquery ajax下载文件流-CSDN博客所以直接使用XMLHttpRequest原生写吧。

let url = '/client/down/downFile?id='+item.id;   // 后端接口
					let xhr = new XMLHttpRequest();
					xhr.open('GET', url, true);        // 也可以使用POST方式，根据接口
					xhr.responseType = "blob";    // 返回类型blob
					xhr.setRequestHeader('Authorization',"clientBearer " + window.localStorage.getItem("token"))    // 请求头 多个再加 xhr.setRequestHeader()
					xhr.onload = function () {
						if (this.status === 200) {
							let blob = this.response;
							that.mySelfFileDown(blob,"文件.pdf")
						}
					};
					// 发送ajax请求
					xhr.send()

	mySelfFileDown:function (res,name) {
				try{
					let	fileName = name
					if(!name){
						try{
							fileName = res.headers["content-disposition"].split("=")[1];
							fileName = decodeURI(fileName); //文件名称解码
							fileName = fileName.replace(/\+/g, ""); //文件名称修改
						}catch (err){
							fileName = "文件"
						}
					}

					if (window.navigator.msSaveOrOpenBlob) { // IE
						var objectUrl = new Blob([res.data], { type: 'application/pdf'})

						navigator.msSaveBlob(objectUrl, fileName)
					} else { // 主流浏览器
						let objectUrl = URL.createObjectURL(new Blob([res]));
						const link = document.createElement('a');
						link.download = fileName;
						link.href = objectUrl;
						link.click();
					}

				}catch(err){
					console.log(err,"======err======")
				}
        	},