ajax异步文件下载

一、概述

  文件下载是比较常用的一种功能，尤其是在excel下载，更是比较常用的。每次遇到下载功能，我也就a标签或者是form标签进行下载，a标签呢基本上就时只能get方式的下载，form可以get也可以post方式进行下载。但是这两种方式都由一个确定就是无法设置header请求头（目前我不知道怎么设置请求头），也就是说如果请求需要携带token之类的指令的时候使用这两个标签基本上就是废了。所以异步下载就只能是使用文件流然后到前端进行转换了。

二、a标签下载

    @GetMapping("/exportExcel")
    public void exportExcel(HttpServletResponse response) throws IOException {
        ServletOutputStream outputStream = response.getOutputStream();
        InputStream is = new FileInputStream("F:/我的下载/test.xlsx");
        IOUtils.copy(is,outputStream);
    }

    <a href="http://127.0.0.1:8080/exportExcel" download="test.xlsx">点击下载</a>

后端配合文件输出流很容易就可以进行下载，可以说a标签下载时最方便的。

三、form标签下载

    @GetMapping("/exportExcel")
    public void exportExcel(HttpServletResponse response) throws IOException {
        ServletOutputStream outputStream = response.getOutputStream();
        InputStream is = new FileInputStream("F:/我的下载/test.xlsx");
        IOUtils.copy(is,outputStream);
    }
    
	<form action="http://127.0.0.1:8080/exportExcel" method="get">
		<!--<input type="text" name="sheetName" value="test">-->
		<input type="submit" value="点击下载">
	</form>

后端也是只要配合文件的输出流就可以很容易的进行下载了。当然也可以写方法的，只不过方法里面时使用js写了一个form标签。

 <button onClick="downloadFileByForm()">点击下载</button>

 function downloadFileByForm() {
        var url = "http://127.0.0.1:8080/exportExcel";
        // form是隐藏的不会显示在页面上
        var form = $("<form style='display: none'></form>").attr("action", url).attr("method", "get");
         // 添加到body下然后进行提交之后直接删除掉这个标签
        form.appendTo('body').submit().remove();
    };

四、ajax异步下载

  ajax异步文件下载是最麻烦的，因为，你请求成功之后，success方法里面的数据msg是一串数据流，你需要将数据流转换成文件进行下载，但是数据流转文件的方法我也没找到，所以网上给出的方法就是将接收到的数据变成前端一个地址，然后使用a标签对这个地址进行下载。

    /* 后端代码 */
    @GetMapping("/exportExcel")
    public void exportExcel(HttpServletResponse response) throws IOException {
        ServletOutputStream outputStream = response.getOutputStream();
        InputStream is = new FileInputStream("F:/我的下载/test.xlsx");
        IOUtils.copy(is,outputStream);
    }


    /* 前端代码 */
    <button onClick="downloadFileByAjax()">点击下载</button>

	function downloadFileByAjax() {
        $.ajax({
            type: "get",
            url: "/exportExcel",
            // 返回类型需要blob，blob表示数据流是文件数据
			xhrFields: { responseType: "blob" },
            success: function(msg){
                // 将返回数据转换为地址
				var url = window.URL.createObjectURL(new Blob([msg]))
				// 创建a标签
				var link = document.createElement('a')
			    // a标签隐藏
				link.style.display = 'none'
				// 把地址给a标签
				link.href = url
				// 设置a标签的下载属性
				link.setAttribute('download', 'excel.xlsx')
                // 将a标签添加到某个存在的标签下
				document.body.appendChild(link)
				// a标签点击下载 
				link.click()
            }
        });
    };