使用Ajax实现跨域文件下载-CSDN博客

本文链接：https://blog.csdn.net/CTLLIN/article/details/103920752

本文探讨如何利用Ajax技术解决跨域问题，实现在不刷新页面的情况下，从不同源下载文件。通过设置请求头、使用JSONP或者CORS，确保文件安全、有效地被浏览器下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function download() {
    var url = 'http://192.168.6.27/export';
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);    // 也可以使用POST方式，根据接口
    xhr.responseType = "blob";  // 返回类型blob
    //定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
    xhr.onload = function () {
        // 请求完成
        if (this.status === 200) {
            var firstContentLength = xhr.getResponseHeader('firstContentLength');
            console.log("firstContentLength:" + firstContentLength);
            var filaname = xhr.getResponseHeader('filename');
            console.log("filaname:" + filaname);
            var secondFileLength = xhr.getResponseHeader('secondFileLength');
            console.log("secondFileLength:" + secondFileLength);

            var blob = this.response;
            var newblob = blob.slice(firstContentLength);
            var reader = new FileReader();
            reader.readAsDataURL(newblob);  // 转换为base64，可以直接放入a表情href
            reader.onload = function (e) {
                // 转换完成，创建一个a标签用于下载
                var a = document.createElement('a');
                a.download = filaname;
                a.href = window.URL.createObjectURL(blob);
                a.target = "_blank";
                $("body").append(a);  // 修复firefox中无法触发click
                a.click();
                $(a).remove();
            }
        } else if (xhr.status == 1000) {
            console.log(this.response + " " + this.statusText);
        } else if (xhr.status == 1001) {
            console.log(this.response + " " + this.statusText);
        } else {
            console.log(this.response + " " + this.statusText);
        }

    };
    // 发送ajax请求
    xhr.send();
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<button type="button" onclick="download()">导出</button>
<script src="demo.js">
</script>
</body>
</html>

@RequestMapping(value = "/export", method = RequestMethod.GET)
	public void exportResourcePlayByDay(HttpServletResponse response, HttpServletRequest request) {

		File file = new File(environment.getProperty("java.io.tmpdir") + File.separator + System.currentTimeMillis() + ".txt");
		try {
			String str="export success,file is comming";
			response.setHeader("filename", file.getName());
			response.setHeader("firstContentLength", String.valueOf(str.getBytes().length));
			StringBuilder stringBuilder = new StringBuilder();
			for (int i = 0; i <1000000 ; i++) {
				stringBuilder.append("测试1234567890测试数据测试数据测试数据测试数据"+UUID.randomUUID().toString()+System.currentTimeMillis()).append("\n");
			}
			FileUtils.writeByteArrayToFile(file, stringBuilder.toString().getBytes("utf-8"));
			byte[] bytes = FileUtils.readFileToByteArray(file);
			response.setHeader("secondFileLength", String.valueOf(bytes.length));
			response.getOutputStream().write(str.getBytes());
			response.getOutputStream().flush();
			//response.setStatus(HttpStatus.CONTINUE.value());
//
			response.setContentType("application/octet-stream");
			response.setHeader("Content-Disposition", "attachment;filename=" + file.getName());
			response.getOutputStream().write(bytes);
			response.getOutputStream().flush();
			response.setStatus(200);

		} catch (Exception e) {
			System.out.println(e);
		}
	}

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
@Slf4j
public class CorsFilter implements Filter {

    final static org.slf4j.Logger logger = org.slf4j.LoggerFactory.getLogger(CorsFilter.class);

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        response.setHeader("Access-Control-Expose-Headers", "filename, firstContentLength, secondFileLength");
        chain.doFilter(req, res);
    }

    @Override
    public void init(FilterConfig filterConfig) {
    }

    @Override
    public void destroy() {
    }
}

ajax 下载文件