随着前后端分离的势头越来越火热,各大公司都纷纷进行前后端分离模式的工作模式调整,同时业务处理中也会有不同的问题浮现出来,那么对于使用ajax进行二进制文件下载就是其中的一个问题,本文我们探究一下此问题解决方案.
处理方案:XHR2
XMLHttpRequest Level 2作为新的浏览器API,同时也增加了responseType和response两个新的属性,通过这两个属性来告知浏览器把请求到的数据按照某种格式进行处理。
1 | xhr.responseType |
使用步骤
1 | //step1:创建xmlhttprequest |
1、使用插件FileSaver.js处理下载
1 | //https://github.com/eligrey/FileSaver.js/ |
里面的type类型和文件名称也可以通过服务端的返回头responseheader处理1
2
3
4
5
6
7
8
9
10var 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 | function downfile(filestream){ |
以上是处理二进制文件下载的方案,希望可以帮助到您!