下载文件的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方式异步下载文件，触发浏览器的文件下载过程。