devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：我家小花儿 | 2024-02-06 17:13:00

赞

踩

js 下载文件

目录

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下载

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

1.2 window.location下载

  1. /**
  2. 	*window.location下载
  3. 	*/
  4. 	function btn2() {
  5. 		debugger;
  6. 		window.location='http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile';
  7. 	}

1.3 iframe下载

  1. /***
  2. 	*iframe下载
  3. 	*/
  4. 	function btn3() {
  5. 		try {
  6. 			var elementIF = document.createElement("iframe");
  7. 			elementIF.src = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";
  8. 			elementIF.style.display = "none";
  9. 			document.body.appendChild(elementIF);
  10. 		}catch(error) {
  11. 			console.log(error);
  12. 		}
  13. 	}

1.4 form表单的形式下载

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

1.5 a标签的方式下载

  1. /**
  2. 	*a标签的方式下载
  3. 	**/
  4. 	function btn5() {
  5. 		const fileName = "Benjamin_Download_Test_File.pdf";
  6. 		const url = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";
  7. 		var a = document.createElement("a");
  8. 		a.download = fileName;
  9. 		a.href = url;
  10. 		// 修复firefox中无法触发click
  11. 		$("body").append(a)
  12. 		a.click();
  13. 		$(a).remove();
  14. 	}

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

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

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

  1. /**
  2. 	*axios方法后台返回流方式下载
  3. 	*/
  4. 	function btn7() {
  5. 		debugger;
  6. 		const url = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";
  7. 		const fileName = "Benjamin_Download_Test_File_20221225.pdf";
  8. 		this.axios.get(url, {responseType: 'blob'}).then(response => {
  9. 			// 创建a标签
  10. 			let a = document.createElement("a");
  11. 			a.download = fileName;
  12. 			// 创建二进制对象
  13. 			const blob = new Blob([response.data]);
  14. 			const downloadURL = (window.URL || window.webkitURL).createObjectURL(blob);
  15. 			a.href = downloadURL;
  16. 			
  17. 			// 模拟点击
  18. 			a.click();
  19. 			
  20. 			//释放资源并删除创建的a标签
  21.             URL.revokeObjectURL(downloadURL);// a.href
  22. 			document.body.removeChild(a);
  23. 		
  24. 		}).catch(error => { 
  25. 			console.log(error);
  26. 		});
  27. 	
  28. 	}

下载按钮： 

 都可以成功下载：

 2.完整源码

后台简单源码：

  1. @RestController
  2. @RequestMapping("/flower/beetl")
  3. @CrossOrigin
  4. public class BeetlController {
  5.  
  6.     @GetMapping(value = "/downloadFile")
  7.     public void downloadFile(HttpServletResponse httpServletResponse) {
  8.         File file = new File("C:\\Users\\admin\\Desktop\\download\\Benjamin_Download_Test_File.pdf");
  9.         InputStream is = null;
  10.         OutputStream os = null;
  11.         try {
  12.             is = new FileInputStream(file);
  13.             os = httpServletResponse.getOutputStream();
  14.             httpServletResponse.setContentType("application/octet-stream");
  15.             httpServletResponse.setHeader("Content-Disposition", "attachment;fileName=Benjamin_Download_Test_File.pdf");
  16.  
  17.             int len = 0;
  18.             byte[] bytes = new byte[1024];
  19.             while ((len = is.read(bytes)) != -1) {
  20.                 os.write(bytes, 0, bytes.length);
  21.                 os.flush();
  22.             }
  23.         } catch (FileNotFoundException e) {
  24.             e.printStackTrace();
  25.         } catch (IOException e) {
  26.             e.printStackTrace();
  27.         } finally {
  28.             try {
  29.                 is.close();
  30.             } catch (IOException e) {
  31.                 e.printStackTrace();
  32.             }
  33.             try {
  34.                 os.close();
  35.             } catch (IOException e) {
  36.                 e.printStackTrace();
  37.             }
  38.         }
  39.     }
  40.  
  41. }

 html页面源码：

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>7中下载方式</title>
  6. </head>
  7.  
  8. <body>
  9. 	<div style="margin-left:60px;margin-top:20px">
  10. 		<button id="btn1" onclick="btn1()" style="background-color:red" >window.location.href下载</button><br> <br>
  11. 		<button id="btn2" onclick="btn2()" style="background-color:orange">window.location下载</button><br> <br>
  12. 		<button id="btn3" onclick="btn3()" style="background-color:yellow">iframe下载</button><br> <br>
  13. 		<button id="btn4" onclick="btn4()" style="background-color:green">form表单的形式下载</button><br> <br>
  14. 		<button id="btn5" onclick="btn5()" style="background-color:cyan">a标签的方式下载</button><br> <br>
  15. 		<button id="btn6" onclick="btn6()" style="background-color:blue">ajax方式后台返回文件流下载</button><br> <br>
  16. 		<button id="btn7" onclick="btn7()" style="background-color:purple">axios方法后台返回流方式下载</button><br> <br>
  17. 	</div>
  18.     
  19. </body>
  20. <!-- <script th:src="@{js/jquery.min.js}"></script> -->
  21. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  22. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  23.  
  24.  
  25. <script>
  26. 	
  27. 	/**
  28. 	*window.location.href下载
  29. 	*/
  30. 	function btn1() {
  31. 		debugger;
  32. 		window.location.href = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";
  33. 	}
  34. 	
  35. 	/**
  36. 	*window.location下载
  37. 	*/
  38. 	function btn2() {
  39. 		debugger;
  40. 		window.location='http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile';
  41. 	}
  42. 	
  43. 	/***
  44. 	*iframe下载
  45. 	*/
  46. 	function btn3() {
  47. 		try {
  48. 			var elementIF = document.createElement("iframe");
  49. 			elementIF.src = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";
  50. 			elementIF.style.display = "none";
  51. 			document.body.appendChild(elementIF);
  52. 		}catch(error) {
  53. 			console.log(error);
  54. 		}
  55. 	}
  56. 	
  57. 	/**
  58. 	*form表单的形式下载
  59. 	*/
  60. 	function btn4() {
  61. 		const url = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";
  62. 		var form = $("<form>");
  63. 		form.attr("style", "display:none");
  64. 		/**target 属性规定一个名称或一个关键词，指示在何处打开 action URL，
  65. 		 * 即在何处显示提交表单后接收到的响应。
  66. 		 *
  67. 		 *_blank 在新窗口/选项卡中打开。
  68. 		 *_self 在同一框架中打开。（默认）
  69. 		 *_parent 在父框架中打开。
  70. 		 *_top 在整个窗口中打开。
  71. 		 *framename 在指定的 iframe 中打开。
  72. 		 */
  73. 		form.attr("target", "_self");
  74. 		form.attr("method", "get");
  75. 		form.attr("action", url);
  76. 		$("body").append(form);
  77. 		// 提交
  78. 		form.submit();
  79. 	}
  80. 	
  81. 	/**
  82. 	*a标签的方式下载
  83. 	**/
  84. 	function btn5() {
  85. 		const fileName = "Benjamin_Download_Test_File.pdf";
  86. 		const url = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";
  87. 		var a = document.createElement("a");
  88. 		a.download = fileName;
  89. 		a.href = url;
  90. 		// 修复firefox中无法触发click
  91. 		$("body").append(a)
  92. 		a.click();
  93. 		$(a).remove();
  94. 	}
  95. 	
  96. 	/**
  97. 	*
  98. 	*ajax方式后台返回文件流下载、
  99. 	*success(data, textStatus, jqXHR)：请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。还有 jqXHR（在jQuery 1.4.x的中，XMLHttpRequest） 对象 。在jQuery 1.5， 成功设置可以接受一个函数数组。每个函数将被依次调用。
  100. 	*
  101. 	*关键在于dataType和xhrFields的属性指定上,指定对属性才能返回blob文件流，dataType: 'binary',xhrFields: {responseType: 'blob'},
  102. 	*/
  103. 	function btn6() {
  104. 		debugger;
  105. 		const url = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";
  106. 		$.ajax({
  107. 			url: url,
  108. 			type: 'get',
  109. 			data: {},
  110. 			contentType: 'application/json;charset=utf-8',
  111. 			// 指定服务器返回的类型,因为我们要返回文件流,所以类型为二进制数据
  112. 			dataType: 'binary',
  113. 			// 原生XMLHttpRequest 的属性,设置响应类型为blob,接收文件流
  114. 			xhrFields: {responseType: 'blob'},
  115. 			success: function(result, status, xhr) {
  116. 				const fileName = "Benjamin_Download_Test_File_20221225.pdf";
  117. 				// 可通过XMLHttpRequest对象,获取响应头
  118.                 console.log(xhr);
  119. 				// 浏览器兼容 参数Blob类型
  120.                 const downloadURL = (window.URL || window.webkitURL).createObjectURL(result);
  121. 				// 创建a标签
  122. 				var a = document.createElement('a');
  123. 				// 下载后文件的名字
  124. 				a.download = fileName;
  125. 				a.href = downloadURL;
  126. 				document.body.appendChild(a);
  127. 				a.click();
  128. 				
  129. 				setTimeout(function () {
  130.                     // 移除内存中的临时文件路径和为下载而创建的a标签
  131.                     URL.revokeObjectURL(downloadURL);
  132.                     a.remove();
  133.                 }, 10000);
  134. 			
  135. 			},
  136. 			
  137. 			error: function (xhr, textStatus, errorMessage) {
  138.                 // 从响应头中获取异常信息,如果包含中文的话会乱码因此 后台URLEncoder.encode() + 前台decodeURIComponent() 防止乱码
  139.                 const errorInfo = decodeURIComponent(xhr.getResponseHeader("errorInfo"));
  140.                 // 对错误信息进行打印
  141.                 console.log(errorInfo);
  142.             }
  143. 			
  144. 		});
  145.  
  146. 	}
  147. 	
  148. 	/**
  149. 	*axios方法后台返回流方式下载
  150. 	*/
  151. 	function btn7() {
  152. 		debugger;
  153. 		const url = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";
  154. 		const fileName = "Benjamin_Download_Test_File_20221225.pdf";
  155. 		this.axios.get(url, {responseType: 'blob'}).then(response => {
  156. 			// 创建a标签
  157. 			let a = document.createElement("a");
  158. 			a.download = fileName;
  159. 			// 创建二进制对象
  160. 			const blob = new Blob([response.data]);
  161. 			const downloadURL = (window.URL || window.webkitURL).createObjectURL(blob);
  162. 			a.href = downloadURL;
  163. 			
  164. 			// 模拟点击
  165. 			a.click();
  166. 			
  167. 			//释放资源并删除创建的a标签
  168.             URL.revokeObjectURL(downloadURL);// a.href
  169. 			document.body.removeChild(a);
  170. 		
  171. 		}).catch(error => { 
  172. 			console.log(error);
  173. 		});
  174. 	
  175. 	}
  176. 	
  177.  
  178. </script>
  179.  
  180. <style>
  181. 	button{
  182. 		width:200px;
  183. 		height:35px;
  184. 	}
  185.  
  186. </style>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/63618
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号