参考资料

  1. 前端接受后端文件流并下载的几种方法
  2. ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践
  3. ajax请求二进制流进行处理（ajax异步下载文件）]
  4. response.setHeader()的用法
  5. response.setContentType()的作用及参数

目录

  • 一. 普通文件下载
    • 1.1 原生servlet的HttpServletResponse方式下载
    • 1.2 Spring的ResponseEntity方式下载
  • 二. 文件流下载-原生ajax之XMLHttpRequest
  • 三. 文件流下载-jQuery的Ajax
  • 四. 文件流下载-原生ajax之fetch
  • 五. 下载数据库中保存的文件

要点

  1. response.setContentType("application/octet-stream"); 指明要返回的内容为二进制的流
  2. response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(文件名.后缀, "UTF-8")); 指明下载的文件名称
    Content-Disposition是Content-Type的扩展，告诉浏览器弹窗下载框，而不是直接在浏览器里展示文件。因为一般浏览器对于它能够处理的文件类型，如txt，pdf 等，它都是直接打开展示，而不是弹窗下载框。

一. 普通文件下载

  • 普通文件下载只能直接触发url进行下载，不能使用Ajax

1.1 原生servlet的HttpServletResponse方式下载

⏹前端

<a href="/test15/fileDownLoad">下载文件</a>

⏹后端

import org.springframework.stereotype.Controller;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;import javax.annotation.Resource;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.net.URLEncoder;@Controller
@RequestMapping("/test15")
public class Test15Controller {@Resourceprivate HttpServletResponse response;@GetMapping("/fileDownLoad")public void fileDownload() throws IOException {// 保存在本地磁盘中的文件File file = new File("C:\\Users\\用户名\\Desktop\\hexo安装.txt");/*⏹1. response.setContentType的作用是使客户端浏览器，区分不同种类的数据并根据不同的MIME调用浏览器内不同的程序嵌入模块来处理相应的数据。⏹2. application/octet-stream表示返回二进制流，表示不知道下载文件类型，具有通用性*/ response.setContentType("application/octet-stream");/*Content-Disposition 的作用:文件下载时会告诉浏览器要下载的文件名称和类型URLEncoder.encode 的作用是为了防止中文文件名乱码*/response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(file.getName(), "UTF-8"));// 使用工具类直接将文件的字节复制到响应输出流中FileCopyUtils.copy(new FileInputStream(file), response.getOutputStream());}
}

1.2 Spring的ResponseEntity方式下载

⏹前端

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div><a id="downloadFile" th:href="@{/test19/testResponseEntity1}">文件下载-普通的方式</a>
</div>
</body>
</html>

⏹后端

  • 通过构造springframework的ResponseEntity类的方式返回数据
  • 可以指定字节码的返回值，响应值，状态码

import org.springframework.core.io.ClassPathResource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;import java.io.*;
import java.net.URLEncoder;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;@Controller
@RequestMapping("/test19")
public class Test19Controller {@GetMapping("/testResponseEntity1")public ResponseEntity<byte[]> testResponseEntity1() throws Exception {// 												


											

普通文件下载 + 前端获取后端返回的文件流并下载相关推荐
	

    
								
  1. 前端将后端返回的文件流转为excel并下载
		
    也算是自己的一个总结吧 在遇到后端给前端返回的一个文件流的注意事项 首先自己封装了一个方法  放在了utils里面 export function exportFile(data, type, fil ...
    
		
    2. 
						
  2. 后端返回PDF文件流，前端处理展示及打印
		
    国庆突如其来的加班q.q,上午接到的需求,只能起床啦 自己也是第一次接触这种业务需求,进行了一顿cv大法,网上有很多版本,个人学习借鉴(cv)了一下,在这里做个学习记录,欢迎各位指正优化,参考学习,如 ...
    
		
    3. 
						
  3. 文件下载后端返回base64文件流，使用a标签下载
		
    后端接口返回base64文件流 <a@click="downloadFiles(item.fileName, item.url)">{{ item.fileName } ...
    
		
    4. 
						
  4. Axios获取后端返回的二进制数据流并下载下来
		
    Axios.post(url, {/*传入的参数*/}, { responseType: 'blob'} /*设置返回值的类型,这里设置文件流blob的形式*/) .then(res => {l ...
    
		
    5. 
						
  5. 根据后端返回的文件流下载文件
		
    //云附件 文件流链接 function clouddownloadResources(id,title) {common.showLoading()api_enclosuredetail.cloud ...
    
		
    6. 
						
  6. 接收服务器返回的文件流并下载
		
    下载或导出xlsx const exportExcel =() =>{proxy.$request({url: 'api/export',method: 'POST',responseType: ...
    
		
    7. 
						
  7. vue 后台返回的文件流进行预览_vue实现下载文件流完整前后端代码
		
    这篇文章主要为大家详细介绍了vue实现下载文件流完整前后端代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 使用Vue时,我们前端如何处理后端返回的文件流 首先后端返 ...
    
		
    8. 
						
  8. vue 后台返回的文件流进行预览_vue项目-pdf预览和下载，后台返回文件流形式
		
    背景:正好最近碰到了这种需求,记录下来,方便以后查看. 后端返回的文件流数据如下图所示: 后台返回数据.png 一.pdf的预览 一开始的时候百度了很多方法,有建议用pdfJs插件的,有iframe嵌 ...
    
		
    9. 
						
  9. nodejs调用后端接口返回excel文件流，nodejs再转发前端实现下载excel
		
    今天在项目上遇到了一个问题,就是后端接口返回excel文件流,然后前端实现下载excel,前端下载的excel文件居然无法打开! 在网上搜索了很多对应的资料,也尝试了很多办法,还是没能解决,最后在这篇 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. binlog数据库不写入binlog_mysql 为什么不能仅仅用 binlog 保证不丢数据
		
    2. 
						
  2. asp.net小技巧：摆脱路径的困扰（三）
		
    3. 
						
  3. 百度超级链XChain（8）部署开发
		
    4. 
						
  4. 深度剖析WinPcap之(七)——获得与释放网络适配器设备列表（5）
		
    5. 
						
  5. 使用gradle多渠道打包
		
    6. 
						
  6. 计算机怎么删除表格,电脑中删除Excel2010表格多余图片的三种方法
		
    7. 
						
  7. Django编写RESTful API（二）：请求和响应
		
    8. 
						
  8. android int 首位值_Android中数值的精确计算
		
    9. 
						
  9. WPF Popup 相关内容
		
    10. 
						
  10. 半夜“逃离上海”？阿里副总裁贾扬清回应：正常差旅回去看病 请不要误解
		
    11. 
						
  11. 如何制作毛玻璃效果？
		
    12. 
						
  12. 撰写oracle-sql-hint的注意事项
		
    13. 
						
  13. oracle中插入一个blob数据
		
    14. 
						
  14. 谷歌卫星地图下载器与万能地图下载器功能比较
		
    15. 
						
  15. 基于AutoCAD自动数控编程工具NC_Manu_Tool（最新V1.39）
		
    16. 
						
  16. poj 1945 Power Hungry Cows 启发式搜索
		
    17. 
						
  17. 3dsMax---椅子
		
    18. 
						
  18. pythonRuntimeError: Cannot re-initialize CUDA in forked subprocess. To use CUDA with multiprocessing
		
    19. 
						
  19. 【基于Python的Selenium2自动化测试】04 - 模拟126邮箱的登录
		
    20. 
						
  20. javacv给本地视频添加水印
		
    21. 
		

	


热门文章
	

    
									
  1. 第一次参加CTF线下比赛的三剑客，都经历了....
			
    2. 
						
  2. 洛谷P1330封锁阳关大学口胡实况
			
    3. 
						
  3. 扫描到电脑计算机访问错误,Win10计算机怎么扫描修复磁盘驱动器错误?
			
    4. 
						
  4. 11 Python 类和对象
			
    5. 
						
  5. 精彩文艺汇演，向党献礼
			
    6. 
						
  6. 如何组建优秀的APP开发团队
			
    7. 
						
  7. Step1帐户登录系统
			
    8. 
						
  8. IMU（惯性测量单元）学习
			
    9. 
						
  9. CSerialPort教程(5) - cmake方式使用CSerialPort
			
    10. 
						
  10. 解决Word单双栏分栏后页码不连续
			
    11.