下载文件的Restful接口的前端实现

背景介绍

　　后端是springboot框架，接口是restful风格接口，需求是异步实现一个文件下载，该文件是动态生成的，以流的方式返回给前端。存在的问题是，ajax不支持post方式传参数，并触发浏览器下载文件。经过多方调研，JavaScript原生XMLHttpRequest()对象可以实现。这里呈现主要的前端代码，以供参考，具体请参考XMLHttpRequest()的API文档介绍https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest。

实现代码

1、实现函数方法

function download(options) {
        var xhr = new XMLHttpRequest();//创建新的XHR对象
        xhr.open(options.method, options.url);//指定获取数据的方式和url地址
        xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8')
        xhr.responseType = 'blob';//以blob的形式接收数据，一般文件内容比较大
        // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
        xhr.onload = function () {
            // 请求完成
            if (this.status === 200) {
                // 请求成功
                var blob = this.response;
                var reader = new FileReader();
                reader.readAsDataURL(blob);    // 转换为base64，可以直接放入a表情href
                reader.onload = function (e) {
                    // 转换完成，创建一个a标签用于下载
                    var a = document.createElement('a');
                    a.download = 'backendCode.zip';//下载的文件名
                    a.href = e.target.result;
                    $("body").append(a);    // 修复firefox中无法触发click
                    a.click();
                    $(a).remove();
                }
            }
        };
        xhr.send(options.data); //post请求传的参数
    }

2、参数设置

var options = {
                url: '/geneCode',  //下载地址
                data: requestDataStr, //要发送的数据
                method: 'post'//post方式发送数据
            };

3、数据对象。

数据对象需要转换成字符串类型，后端才可以反序列化，映射到指定的javabean。

var javaBean = {
                author: “Eric”
            }
var requestDataStr = JSON.stringify(javaBean);    

结果

　　在触发下载的函数中，引用该函数，即可实现post方式异步下载文件，触发浏览器的文件下载过程。