程序员经验分享-hwhale

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

2023-10-29

参考资料

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

要点

  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 {

    @Resource
    private 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 {

        //
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

Js

Java

AJAX

jQuery

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

随机推荐

热门标签

Powered by Hwhale