javascript下载文件几种方式，接收后台返回流下载或直接下载文件

爱被打了一巴掌 2024-03-30 12:09 87阅读 0赞

**目录**

1 javascript下载文件7中方式

1.1 window.location.href下载

1.2 window.location下载

1.3 iframe下载

1.4 form表单的形式下载

1.5 a标签的方式下载

1.6 ajax方式后台返回文件流下载

1.7 axios方法后台返回流方式下载

2.完整源码

## 1 javascript下载文件7中方式 ##

### 1.1 window.location.href下载 ###

/**
    	*window.location.href下载
    	*/
    	function btn1() {
    		debugger;
    		window.location.href = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";
    	}

### 1.2 window.location下载 ###

/**
    	*window.location下载
    	*/
    	function btn2() {
    		debugger;
    		window.location='http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile';
    	}

### 1.3 iframe下载 ###

/***
    	*iframe下载
    	*/
    	function btn3() {
    		try {
    			var elementIF = document.createElement("iframe");
    			elementIF.src = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";
    			elementIF.style.display = "none";
    			document.body.appendChild(elementIF);
    		}catch(error) {
    			console.log(error);
    		}
    	}

### 1.4 form表单的形式下载 ###

/**
    	*form表单的形式下载
    	*/
    	function btn4() {
    		const url = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";
    		var form = $("<form>");
    		form.attr("style", "display:none");
    		/**target 属性规定一个名称或一个关键词，指示在何处打开 action URL，
    		 * 即在何处显示提交表单后接收到的响应。
    		 *
    		 *_blank 在新窗口/选项卡中打开。
    		 *_self 在同一框架中打开。（默认）
    		 *_parent 在父框架中打开。
    		 *_top 在整个窗口中打开。
    		 *framename 在指定的 iframe 中打开。
    		 */
    		form.attr("target", "_self");
    		form.attr("method", "get");
    		form.attr("action", url);
    		$("body").append(form);
    		// 提交
    		form.submit();
    	}

### 1.5 a标签的方式下载 ###

/**
    	*a标签的方式下载
    	**/
    	function btn5() {
    		const fileName = "Benjamin_Download_Test_File.pdf";
    		const url = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";
    		var a = document.createElement("a");
    		a.download = fileName;
    		a.href = url;
    		// 修复firefox中无法触发click
    		$("body").append(a)
    		a.click();
    		$(a).remove();
    	}

### 1.6 ajax方式后台返回文件流下载 ###

/**
    	*
    	*ajax方式后台返回文件流下载、
    	*success(data, textStatus, jqXHR)：请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。还有 jqXHR（在jQuery 1.4.x的中，XMLHttpRequest） 对象 。在jQuery 1.5， 成功设置可以接受一个函数数组。每个函数将被依次调用。
    	*
    	*关键在于dataType和xhrFields的属性指定上,指定对属性才能返回blob文件流，dataType: 'binary',xhrFields: {responseType: 'blob'},
    	*/
    	function btn6() {
    		debugger;
    		const url = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";
    		$.ajax({
    			url: url,
    			type: 'get',
    			data: {},
    			contentType: 'application/json;charset=utf-8',
    			// 指定服务器返回的类型,因为我们要返回文件流,所以类型为二进制数据
    			dataType: 'binary',
    			// 原生XMLHttpRequest 的属性,设置响应类型为blob,接收文件流
    			xhrFields: {responseType: 'blob'},
    			success: function(result, status, xhr) {
    				const fileName = "Benjamin_Download_Test_File_20221225.pdf";
    				// 可通过XMLHttpRequest对象,获取响应头
                    console.log(xhr);
    				// 浏览器兼容 参数Blob类型
                    const downloadURL = (window.URL || window.webkitURL).createObjectURL(result);
    				// 创建a标签
    				var a = document.createElement('a');
    				// 下载后文件的名字
    				a.download = fileName;
    				a.href = downloadURL;
    				document.body.appendChild(a);
    				a.click();
    				
    				setTimeout(function () {
                        // 移除内存中的临时文件路径和为下载而创建的a标签
                        URL.revokeObjectURL(downloadURL);
                        a.remove();
                    }, 10000);
    			
    			},
    			
    			error: function (xhr, textStatus, errorMessage) {
                    // 从响应头中获取异常信息,如果包含中文的话会乱码因此 后台URLEncoder.encode() + 前台decodeURIComponent() 防止乱码
                    const errorInfo = decodeURIComponent(xhr.getResponseHeader("errorInfo"));
                    // 对错误信息进行打印
                    console.log(errorInfo);
                }
    			
    		});
    
    	}

### 1.7 axios方法后台返回流方式下载 ###

/**
    	*axios方法后台返回流方式下载
    	*/
    	function btn7() {
    		debugger;
    		const url = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";
    		const fileName = "Benjamin_Download_Test_File_20221225.pdf";
    		this.axios.get(url, {responseType: 'blob'}).then(response => {
    			// 创建a标签
    			let a = document.createElement("a");
    			a.download = fileName;
    			// 创建二进制对象
    			const blob = new Blob([response.data]);
    			const downloadURL = (window.URL || window.webkitURL).createObjectURL(blob);
    			a.href = downloadURL;
    			
    			// 模拟点击
    			a.click();
    			
    			//释放资源并删除创建的a标签
                URL.revokeObjectURL(downloadURL);// a.href
    			document.body.removeChild(a);
    		
    		}).catch(error => { 
    			console.log(error);
    		});
    	
    	}

下载按钮：

![222b01de278f4cf88a24d3b3027ac161.png][]

都可以成功下载：

![582841dbbff6484d85b5fd6b4debf07f.png][]

## 2.完整源码 ##

后台简单源码：

@RestController
    @RequestMapping("/flower/beetl")
    @CrossOrigin
    public class BeetlController {
    
        @GetMapping(value = "/downloadFile")
        public void downloadFile(HttpServletResponse httpServletResponse) {
            File file = new File("C:\\Users\\admin\\Desktop\\download\\Benjamin_Download_Test_File.pdf");
            InputStream is = null;
            OutputStream os = null;
            try {
                is = new FileInputStream(file);
                os = httpServletResponse.getOutputStream();
                httpServletResponse.setContentType("application/octet-stream");
                httpServletResponse.setHeader("Content-Disposition", "attachment;fileName=Benjamin_Download_Test_File.pdf");
    
                int len = 0;
                byte[] bytes = new byte[1024];
                while ((len = is.read(bytes)) != -1) {
                    os.write(bytes, 0, bytes.length);
                    os.flush();
                }
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            } finally {
                try {
                    is.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
                try {
                    os.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    
    }

html页面源码：

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>7中下载方式</title>
    </head>
    
    <body>
    	<div style="margin-left:60px;margin-top:20px">
    		<button id="btn1" onclick="btn1()" style="background-color:red" >window.location.href下载</button><br> <br>
    		<button id="btn2" onclick="btn2()" style="background-color:orange">window.location下载</button><br> <br>
    		<button id="btn3" onclick="btn3()" style="background-color:yellow">iframe下载</button><br> <br>
    		<button id="btn4" onclick="btn4()" style="background-color:green">form表单的形式下载</button><br> <br>
    		<button id="btn5" onclick="btn5()" style="background-color:cyan">a标签的方式下载</button><br> <br>
    		<button id="btn6" onclick="btn6()" style="background-color:blue">ajax方式后台返回文件流下载</button><br> <br>
    		<button id="btn7" onclick="btn7()" style="background-color:purple">axios方法后台返回流方式下载</button><br> <br>
    	</div>
        
    </body>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    
    
    <script>
    	
    	/**
    	*window.location.href下载
    	*/
    	function btn1() {
    		debugger;
    		window.location.href = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";
    	}
    	
    	/**
    	*window.location下载
    	*/
    	function btn2() {
    		debugger;
    		window.location='http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile';
    	}
    	
    	/***
    	*iframe下载
    	*/
    	function btn3() {
    		try {
    			var elementIF = document.createElement("iframe");
    			elementIF.src = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";
    			elementIF.style.display = "none";
    			document.body.appendChild(elementIF);
    		}catch(error) {
    			console.log(error);
    		}
    	}
    	
    	/**
    	*form表单的形式下载
    	*/
    	function btn4() {
    		const url = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";
    		var form = $("<form>");
    		form.attr("style", "display:none");
    		/**target 属性规定一个名称或一个关键词，指示在何处打开 action URL，
    		 * 即在何处显示提交表单后接收到的响应。
    		 *
    		 *_blank 在新窗口/选项卡中打开。
    		 *_self 在同一框架中打开。（默认）
    		 *_parent 在父框架中打开。
    		 *_top 在整个窗口中打开。
    		 *framename 在指定的 iframe 中打开。
    		 */
    		form.attr("target", "_self");
    		form.attr("method", "get");
    		form.attr("action", url);
    		$("body").append(form);
    		// 提交
    		form.submit();
    	}
    	
    	/**
    	*a标签的方式下载
    	**/
    	function btn5() {
    		const fileName = "Benjamin_Download_Test_File.pdf";
    		const url = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";
    		var a = document.createElement("a");
    		a.download = fileName;
    		a.href = url;
    		// 修复firefox中无法触发click
    		$("body").append(a)
    		a.click();
    		$(a).remove();
    	}
    	
    	/**
    	*
    	*ajax方式后台返回文件流下载、
    	*success(data, textStatus, jqXHR)：请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。还有 jqXHR（在jQuery 1.4.x的中，XMLHttpRequest） 对象 。在jQuery 1.5， 成功设置可以接受一个函数数组。每个函数将被依次调用。
    	*
    	*关键在于dataType和xhrFields的属性指定上,指定对属性才能返回blob文件流，dataType: 'binary',xhrFields: {responseType: 'blob'},
    	*/
    	function btn6() {
    		debugger;
    		const url = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";
    		$.ajax({
    			url: url,
    			type: 'get',
    			data: {},
    			contentType: 'application/json;charset=utf-8',
    			// 指定服务器返回的类型,因为我们要返回文件流,所以类型为二进制数据
    			dataType: 'binary',
    			// 原生XMLHttpRequest 的属性,设置响应类型为blob,接收文件流
    			xhrFields: {responseType: 'blob'},
    			success: function(result, status, xhr) {
    				const fileName = "Benjamin_Download_Test_File_20221225.pdf";
    				// 可通过XMLHttpRequest对象,获取响应头
                    console.log(xhr);
    				// 浏览器兼容 参数Blob类型
                    const downloadURL = (window.URL || window.webkitURL).createObjectURL(result);
    				// 创建a标签
    				var a = document.createElement('a');
    				// 下载后文件的名字
    				a.download = fileName;
    				a.href = downloadURL;
    				document.body.appendChild(a);
    				a.click();
    				
    				setTimeout(function () {
                        // 移除内存中的临时文件路径和为下载而创建的a标签
                        URL.revokeObjectURL(downloadURL);
                        a.remove();
                    }, 10000);
    			
    			},
    			
    			error: function (xhr, textStatus, errorMessage) {
                    // 从响应头中获取异常信息,如果包含中文的话会乱码因此 后台URLEncoder.encode() + 前台decodeURIComponent() 防止乱码
                    const errorInfo = decodeURIComponent(xhr.getResponseHeader("errorInfo"));
                    // 对错误信息进行打印
                    console.log(errorInfo);
                }
    			
    		});
    
    	}
    	
    	/**
    	*axios方法后台返回流方式下载
    	*/
    	function btn7() {
    		debugger;
    		const url = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";
    		const fileName = "Benjamin_Download_Test_File_20221225.pdf";
    		this.axios.get(url, {responseType: 'blob'}).then(response => {
    			// 创建a标签
    			let a = document.createElement("a");
    			a.download = fileName;
    			// 创建二进制对象
    			const blob = new Blob([response.data]);
    			const downloadURL = (window.URL || window.webkitURL).createObjectURL(blob);
    			a.href = downloadURL;
    			
    			// 模拟点击
    			a.click();
    			
    			//释放资源并删除创建的a标签
                URL.revokeObjectURL(downloadURL);// a.href
    			document.body.removeChild(a);
    		
    		}).catch(error => { 
    			console.log(error);
    		});
    	
    	}
    	
    
    </script>
    
    <style>
    	button{
    		width:200px;
    		height:35px;
    	}
    
    </style>

[222b01de278f4cf88a24d3b3027ac161.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/26b2a7450b1c438b80d9373b3c4d6b6c.png
[582841dbbff6484d85b5fd6b4debf07f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/8c807df328d1432484f9bbb893ba6638.png