javascript之ajax 二进制文件下载

发表于 更新于 分类于

  随着前后端分离的势头越来越火热，各大公司都纷纷进行前后端分离模式的工作模式调整，同时业务处理中也会有不同的问题浮现出来，那么对于使用ajax进行二进制文件下载就是其中的一个问题，本文我们探究一下此问题解决方案.

处理方案：XHR2

XMLHttpRequest Level 2作为新的浏览器API，同时也增加了responseType和response两个新的属性，通过这两个属性来告知浏览器把请求到的数据按照某种格式进行处理。

1
2
3
4
xhr.responseType
//在发送请求之前，根据需求把xhr.responseType设置'text'、'arraybuffer'、'blob'或者'document'。它的默认值是'text' 。
xhr.response
//获得了数据之后，根据之前responseType的值，xhr的response属性就是DOMString、ArrayBuffer、Blob或者Document格式的数据

使用步骤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//step1:创建xmlhttprequest
var oAjax = null;
if (window.XMLHttpRequest) {
  oAjax = new XMLHttpRequest();
} else {
  oAjax = new ActiveXObject("Microsoft.XMLHTTP");
} 
//step2:连接服务器
oAjax.open('post', url, true); 
//step3:设置请求header，可根据实际场景按需设置
oAjax.setRequestHeader("Content-type","application/json");
//step4:设置数据请求格式
oAjax.responseType = "arraybuffer";
//step5:接收服务器的返回
oAjax.send(JSON.stringify(data)); 
oAjax.onload = function(){
  if (this.status == 200) {	
     //处理下载逻辑，下面详解
     //第三个参数为处理文件类型
     downfile(this.response,'文件名称',{})
  }
   
}

1、使用插件FileSaver.js处理下载

1
2
3
4
5
6
7
8
9
10
11
//https://github.com/eligrey/FileSaver.js/
var FileSaver = require('file-saver');
function downfile(filestream){
    var file = new File([filestream],filename, {type: "application/excel; charset=UTF-8"});	   
    if(file.size && file.size > 0){
        FileSaver.saveAs(file);
    }else{
        //给出不能下载提示
    }
  	
}

里面的type类型和文件名称也可以通过服务端的返回头responseheader处理

1
2
3
4
5
6
7
8
9
10
var filename = "";
var disposition = xhr.getResponseHeader('Content-Disposition');
if (disposition && disposition.indexOf('attachment') !== -1) {
    var filenameRegex = /filename[^;=]*=((['"]).*?2|[^;]*)/;
    var matches = filenameRegex.exec(disposition);
    if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
}
var type = xhr.getResponseHeader('Content-Type');
var file = new File([filestream],filename, type);	   	   		
FileSaver.saveAs(file);

2、使用超链接，借助download属性处理下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function downfile(filestream){
    var blob = new Blob([filestream], {type: "application/excel; charset=UTF-8"});
    var URL = window.URL || window.webkitURL;
    var downloadUrl = URL.createObjectURL(blob);
    window.location = downloadUrl
    var a = document.createElement("a");

    if (typeof a.download === 'undefined') {
        window.location = downloadUrl;
    } else {
        a.href = downloadUrl;
        a.id = 'downloadfile'
        a.download = 'AA.xls';
        document.body.appendChild(a);
        a.click();        
    }

    setTimeout(function () { removeNode(null,'downloadfile'); URL.revokeObjectURL(downloadUrl); }, 1000); // 释放资源
} 
function removeNode(pid,cid) {
    var container = document.getElementById(pid) || document.body;
    var myNode = document.getElementById(cid);
    container.removeChild(myNode);
}

以上是处理二进制文件下载的方案，希望可以帮助到您！