前端文件下载 之 ArrayBuffer && Blob && base64 && 文件地址

整个下载思想围绕着将拿到的数据转成blob对象后下载！

arraybuffer转blob很方便，作为参数传入就行了。

var buffer = new ArrayBuffer(16)
var blob = new Blob([buffer])

blob转arraybuffer 此处需要借助fileReader对象:

var blob = new Blob([1,2,3,4,5])
var reader = new FileReader()
 
reader.onload = function() {
    console.log(this.result)
}
reader.readAsArrayBuffer(blob)

请求后端下载（假如设置的是 responseType: ‘arraybuffer’）

let a = document.createElement('a');
 ArrayBuffer 转为 Blob
 let blob = new Blob([response.data], {type: "application/vnd.ms-excel"}); 
 let objectUrl = URL.createObjectURL(blob);
 a.setAttribute("href",objectUrl);
 a.setAttribute("download", '计划单电子表格.xls');
 a.click();

备注：如果 responseType: ‘blob’，那么就直接 URL.createObjectURL(blob)后下载

返回文件地址下载（该方法只能是同源且不需要授权），否则建议应在原本的http请求插件的基础上封装且带上token去请求该文件

download(url) {
	var xhr = new XMLHttpRequest();
	xhr.open("GET", url);
	xhr.responseType = "blob";
	xhr.onload = function() {
		let a = document.createElement("a");
		let objectUrl = URL.createObjectURL(xhr.response);
		a.setAttribute("href", objectUrl);
		a.setAttribute("download", "aa.jpg");
		a.click();
	};
	xhr.onerror = function() {
		console.error("could not download file");
	};
	xhr.send();
}

后端返回 base64 ，处理思想基于FileSaver.js ，有这里可以推测出， xhr.open(‘GET’, base64Url) 不但能放base64Url地址，还能放blob地址，事实上，blob地址是一个存在浏览器中的一个引用地址，该地址存着文件数据,该文件数据与base664数据应该一致或者相似?(猜测~~)

function download (base64Url) {
	var xhr = new XMLHttpRequest()
	xhr.open('GET', base64Url)
	xhr.responseType = 'blob'
	xhr.onload = function () {
		// 此处就能拿到blob对象进行下载处理
	}
	xhr.onerror = function () {
		console.error('could not download file')
	}
	xhr.send()
}

扩展
1：关于responseType，这个是设置给浏览器来解析后端返回的数据格式的，并不是告诉后端要返回什么数据格式，假设说后端返回的是json，那么不管responseType设置成什么都是json，只是会导致解析错误，如果是下载文件那么文件将损坏。
2：能使用xhr.open(‘GET’,url )直接下载的url可以直接放在浏览器地址栏上试试后端返回base64数据是否正确

base64常用前缀：
.doc——data:application/msword;base64,
.docx——data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,
.xls——data:application/vnd.ms-excel;base64,
.xlsx——data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,
.pdf——data:application/pdf;base64,
.ppt——data:application/vnd.ms-powerpoint;base64,
.pptx——data:application/vnd.openxmlformats-officedocument.presentationml.presentation;base64,
.txt——data:text/plain;base64,
.png——data:image/png;base64,
.jpg——data:image/jpeg;base64,
.gif——data:image/gif;base64,
.svg——data:image/svg+xml;base64,
.ico——data:image/x-icon;base64,
.bmp——data:image/bmp;base64,

n:文件下载神级插件 FileSaver.js