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

背景介绍

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

实现代码

1、实现函数方法

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

2、参数设置

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

3、数据对象。

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

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

结果

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