从后台获取字节流，然后前端实现下载并保存

场景操作过程：当我点击一个按钮时，页面发起服务器请求，后台返回一个字节流，然后弹出文件另存为的弹窗，直接保存

第一部分主要讲如何从后端获取字节流，第二部分主要讲如何在获取完字节流后自动保存

1. 因为后台传回来的是字节流，所以不能用ajax方法（dataType没有能接受字节流的参数），要用原生的XMLHttpRequest

var xhr = new XMLHttpRequest();
var fileName = “XXX”;//设置下载时候的文件名
//要请求的Url和携带的参数
var url = "";
xhr.open("get", url, true);//打开请求 
//设置响应类型为blob类型（接受字节流）
xhr.responseType = "blob";
xhr.onload = function () {//返回成功之后执行的方法
    if (this.status == "200") {

--------下载的部分开始-----


        //获取响应文件流　　
        var blob = this.response;
        //将文件流保存到a标签
        self.$(".targetLi a").attr("href", window.URL.createObjectURL(blob));
        self.$(".targetLi a").attr("download",fileName);
        });


        self.$(".targetLi a span").click();
        $(“a”).remove();
--------下载的部分结束-----
    } else if (this.status == "500"){
        //链接响应失败
    }
};
xhr.send();//发送请求

 

2.下载部分

上面方框框住的部分就是下载部分，原理很简单，通过a标签download属性可有可无，但是如果想下载的文件有自定义命名的话，最好加上，download=”文件名称”。

（1）用window.URL.createObjectURL(blob)方法讲后台返回的字节流转换成URL，然后在页面上创建一个不可见的a标签（display：none）。a标签里面嵌多一层<span>元素，用于触发点击事件（等下告知为什么）。将转化好的URL赋值给a标签的href属性。ps：如果你创建的a标签外面的父元素有点击事件，要记得给a标签加上阻止冒泡[event.stopPropagation(); ]。

（2）最后通过.click();方法触发a标签的点击。但是我之前尝试过直接调用$(“a”).click();来出发点击事件，但是没有触发到，后来通过点击a标签里面span，通过事件冒泡的方式来触发a标签的点击事件——$(“a span”).click();

（3）结束完以上操作后，用remove()方法，把a标签移除掉。

（4）保存文件的弹窗的出现，这里我一开始不知道这个框是怎么打开的，然后百度找了n久，结果它是由浏览器控制的，只要设置好浏览器的下载后保存位置就好了，那个弹窗就会自动打开了。