前端文件流生成文件

        前端下载文件一般是一个a标签跳转链接到以上传文件服务器的文件，浏览器自动生成下载，或者是点击直接a标签生成文件流直接下载，但是后面这种如果后端报错，前端不能对报错信息进行处理的情况下，会将数据直接打印在页面上，这样子就特别影响到用户体验。这边我们ajax请求数据，尽量报错信息能使前端捕获到，那就数据流要在前端进行处理，那么和后端约定传过来的流格式目前归纳为两种：

1.base64数据传输生成链接：

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    if ( xhr.readyState === 4 ) {

        if (xhr.status === 200) {
                try {
                        //传过来的数据
                        var feedbackData = JSON.parse(xhr.responseText);
                        var a = document.createElement('a');
                        //生成a标签链接
                        a.href = 'data:application/pdf;base64,' + feedbackData.data;
                        //下载文件名，不加是自定义
                        a.setAttribute('download', 'pdf下载.pdf');
                       //自动下载
                        a.click();
                  } catch(e) {
                        self.opt.warnCallback && self.opt.warnCallback.call(this, "请求错误");
                }
          } else {
                console.log("当前状态" + xhr.status)
          }
     }

}
xhr.open('get', url, false);
xhr.send('');

2.二进制生成链接

 （1）组装blob对象
 （2）createObjectURL(blob)生成对象

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    if ( xhr.readyState === 4 ) {
        if (xhr.status === 200) {
            try {
                //传过来的数据
                var feedbackData = JSON.parse(xhr.responseText);
                //生成类型数组视图
                var byteString = feedbackData.data,
                UnitArray = new Uint8Array(byteString.length);
                for(var i = 0; i < byteString.length; i++) {
                        UnitArray[i] = byteString.charCodeAt(i);
                };
                //组装blob,类file
               var blob = new Blob( [UnitArray], { type: 'application/pdf'});
                var url = URL.createObjectURL(blob);
                var a = document.createElement('a');
                a.download='pdf下载.pdf';
                a.href = url;
                //自动下载
                a.click();
            } catch(e) {
                self.opt.warnCallback && self.opt.warnCallback.call(this, "请求错误");
            }
        } else {
            console.log("当前状态" + xhr.status)
        }
    }
}
xhr.open('get', url, false);
xhr.send('');

  上面的也可以第一种也可以将base64先转化成二进制（btoa生成二进制），在生成blob对象，在生成链接；也可以将二进制转化成base64,在生成本地链接，排除为了兼容，谁会去舍近求远呢？有一种场景就是cavas图片上传，文件服务器只接受文件格式，那么canvas上传就要先把转化成base64，再将base64转化成二进制，生成blob对象，再上传。这边不详细说明了。