使用axios实现post请求方式下载文件

实现方法

Java请求中设置header请求头参数

import java.io.File;
import javax.servlet.http.HttpServletResponse;

public class FileUtil {

    public static void fileDownload(HttpServletResponse response, File file) {

        FileInputStream fileInputStream = null;

        ServletOutputStream outputStream = null;

        try {

            /* 获取文件输入流 */
            fileInputStream = new FileInputStream(file);

            /* 定义请求头 */
            response.setHeader("content-disposition", "attachment;fileName=" + URLEncoder
                    .encode(file.getName(), CharsetUtil.UTF_8));

            /* 设置该请求头后,js能够获取content-disposition请求头数据,从中获取文件名称 */
            response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");

            /* 从response中获取写入流 */
            outputStream = response.getOutputStream();
            /* 将文件输入流中的数据写入到response的文件输出流中 */
            IOUtils.copy(fileInputStream, outputStream);

        } catch (Exception e) {
            throw new RuntimeException(e);

            /* 资源释放 */
        } finally {
            try {
                if (outputStream != null) outputStream.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
            try {
                if (fileInputStream != null) fileInputStream.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
}

js实现文件流下载处理

/* 在axios请求中加入responseType: 'blob'参数,表示接收的数据为二进制文件流 */
axios.post(`请求地址`, 请求需要的数据, {responseType: 'blob'}).then(response => {
	/* 从请求头中获取文件名称,用于将文件流转换成对应文件格式的文件,防止文件损坏 */
	let split = response.headers['content-disposition'].split("=");
	/* 将数据流转换为对应格式的文件,并创建a标签,模拟点击下载,实现文件下载功能 */
	let fileReader = new FileReader();
	fileReader.readAsDataURL(response.data);
	fileReader.onload = e => {
		let a = document.createElement('a');
		a.download = split[1];
		a.href = e.target.result;
		document.body.appendChild(a);
		a.click();
		document.body.removeChild(a);
	}
})