使用Ajax进行文件下载-优快云博客

本文链接：https://blog.youkuaiyun.com/cai_hongfei/article/details/99895522

本文介绍了如何在Spring MVC中利用Ajax技术发送请求来实现文件的下载。通过ResponseEntity处理响应，确保文件能正确地被浏览器作为附件下载。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script type="text/javascript" src="/jquery-3.4.1.min.js"></script>
	<button onclick="download()">下载</button>
	<div id="status"></div>
	<script type="text/javascript">
		function download() {
			var url = "http://localhost:8080/excel/download"
			var xhr = createXHR();
			xhr.onload = function(event) {
				if ((xhr.status >= 200 && xhr.status < 300)
						|| xhr.status == 304) {
					const blob = this.response;
					const reader = new FileReader();
					reader.readAsDataURL(blob); // 转换为base64，可以直接放入a标签href
					reader.onload = function(e) {
						// 转换完成，创建一个a标签用于下载
						const a = document.createElement('a');
						const ContentDisposition = xhr.getResponseHeader("Content-Disposition");
						const decode = decodeURI(ContentDisposition);
						const cArray = decode.split(";");
						const substing = cArray[2].split("=")[1];
						a.download = substing.substring(1,substing.length-1);
						a.href = e.target.result;
						$("body").append(a); // 修复firefox中无法触发click
						a.click();
						$(a).remove();
					}
				} else {
					alert('Request was unsuccessful: ' + xhr.status);
				}
			}
			xhr.onprogress = function(event) {
				var divStatus = document.getElementById("status");
				if (event.lengthComputable) {
					divStatus.innerHTML = "Received " + event.loaded + " of "
							+ event.total + " bytes";
				}
			}
			xhr.open("get", url, true);
			xhr.responseType = "blob";
			xhr.send(null);
		}
		function createXHR() {
			if (typeof XMLHttpRequest != "undefined") {
				return new XMLHttpRequest();
			} else if (typeof ActiveXObject != "undefined") {
				if (typeof arguments.callee.activeXString != "string") {
					var versions = [ "MSXML2.XMLHttp.6.0",
							"MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp" ], i, len;
					var len = versions.length;
					for (i = 0; i < len; i++) {
						try {
							new ActiveObject(versions[i]);
							arguments.callee.activeXString = version[i];
							break;
						} catch (ex) {
							// 跳过
						}
					}
				}
				return new ActiveXObject(arguments.callee.activeXString);
			} else {
				throw new Error("No XHR object available.");
			}
		}
	</script>
</body>
</html>

package com.example.ajaxexcel.controller;

import java.io.File;
import java.io.IOException;
import java.net.URLEncoder;

import org.apache.commons.io.FileUtils;
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 org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
@RequestMapping("/excel")
public class ExcelController {
	@RequestMapping(value = { "/index", "/" })
	public ModelAndView index(ModelAndView mv) {
		mv.setViewName("download.html");
		return mv;
	}

	@RequestMapping("/download")
	public ResponseEntity<byte[]> downloadFile() throws IOException {
		String realFileName = "C:\\Users\\97131\\Downloads\\ajax-excel\\ajax-excel\\xssf-printsetup.xlsx";
		HttpHeaders headers = new HttpHeaders();
		headers.setContentDispositionFormData("attachment", URLEncoder.encode("测试中文.xlsx","utf-8"));
		headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
		return new ResponseEntity<>(FileUtils.readFileToByteArray(new File(realFileName)),headers,HttpStatus.CREATED);
		
	}
}

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.1.7.RELEASE</version>
		<relativePath /> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>ajax-excel</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>ajax-excel</name>
	<description>Demo project for Spring Boot</description>

	<properties>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.apache.poi/poi -->
		<dependency>
			<groupId>org.apache.poi</groupId>
			<artifactId>poi</artifactId>
			<version>3.17</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.apache.poi/poi-ooxml -->
		<dependency>
			<groupId>org.apache.poi</groupId>
			<artifactId>poi-ooxml</artifactId>
			<version>3.17</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
		<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.1</version>
		</dependency>

	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

发送ajax请求下载文件