前端如何根据后端接口实现文件下载

根据接口地址实现文件下载，我比较喜欢两种方式：第一种是直接使用location.href实现文件下载，第二种是使用ajax调接口实现文件下载。

假如：接口地址：http://localhost:8080/abc/index/api/files

一：location.href实现方式：

直接在事件中写入：

location.href=http://localhost:8080/abc/index/api/files;

优点：代码简洁，不需要使用ajax实现接口调用；下载后的文件类型和文件名称不需要前端自己定义，直接会识别后端定义好的文件名和文件类型。

缺点：当文件较大时，等待时间较长时不方便定义等待状态（比如，下载过程启用v-loading加载），容易造成，点击下载后，很长时间没有反应，用户体验不佳。

二：使用ajax调接口实现方式：(利用blob读取接口返回二进制流)

在事件中写入：

                var that=this;
                that.loading = true;   //使用v-loading加载
                var url = 'http://localhost:8080/abc/index/api/files';
                var xhr = new XMLHttpRequest();
                xhr.open('get', url, true);
                xhr.responseType = "blob";    // 返回类型blob
                // 定义请求完成的处理函数
                xhr.onload = function () {
                    // 请求完成
                    if (this.status === 200) {
                        // 返回200
                        var blob = this.response;
                        var reader = new FileReader();
                        reader.readAsDataURL(blob);    // 转换为base64，可以直接放入标签href
                        reader.onload = function (e) {
                            // 创建一个a标签用于下载
                            var a = document.createElement('a');
                            a.download = 'abc.txt';  //定义文件名称和文件类型
                            a.href = e.target.result;
                            $("body").append(a); 
                            a.click();
                            $(a).remove();
                            that.loading = false;   //下载完成，将loading加载关闭
                        }
                    }
                }
                // 发送ajax请求
                xhr.send();

优点：当文件较大时，等待时间较长可以非常方便的定义等待状态（比如，下载过程启用v-loading加载）用户体验较好。

缺点：代码量大；下载时的文件类型和文件名称都前端自己定义，不能识别后端定义好的文件名和文件类型（在实现过程中，必须要清楚的知道下载的文件名称和文件类型，特别是文件类型，如果文件类型定义错误，是不能成功打开下载的文件）。

最后：如果下载文件后不能正常打开，就需要设置response-content-type类型：文件下载最常用application/octet-stream。

   application/xhtml+xml ：XHTML格式
   application/xml     ： XML数据格式
   application/atom+xml  ：Atom XML聚合格式    
   application/json    ： JSON数据格式
   application/pdf       ：pdf格式  
   application/msword  ： Word文档格式
   application/octet-stream ： 二进制流数据（如常见的文件下载）
   application/x-www-form-urlencoded ： <form encType=””>中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）

如：location.href=http://localhost:8080/abc/index/api/files?response-content-type=application/octet-stream