下载Excel等大文件时,我们通过ajax请求到二进制的data数据,再利用Blob对象包装,即可实现下载大文件。
Blob对象
一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。
var blob = new Blob(data[, options]))
返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
接受两个参数:
- data:是一组数据,必须是数组,即使只有一个字符串也必须用数组装起来.
- options:是对这一Blob对象的配置属性,目前也只有一个type也就是相关的MIME需要设置 type的值: ‘text/csv,charset=UTF-8’ 设置为csv格式,并设置编码为UTF-8,’text/html’ 设置成html格式。
请求二进制数据
- 请求数据类型: responseType: 'arraybuffer' // 二进制流
- 请求返回的数据:res
URL.createObjectURL()
URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
每次调用 createObjectURL() 方法时,都会创建一个新的 URL 对象,当不再需要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL() 方法传入创建的URL为参数,用来释放它。浏览器会在文档退出的时候自动释放它们,但是为了获得最佳性能和内存使用状况,应该在安全的时机主动释放掉它们。
下载excel 表格 :
res => {
const blob = new Blob([res], {
type: 'application/ynd.ms-excel;charset=UTF-8' // excel表格类型
}); // 创建Blob实例
const downloadElement = document.createElement('a');
const href = window.URL.createObjectURL(blob); // 创建 URL 对象
downloadElement.href = href;
downloadElement.download = 'xxx.xls';
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement); // 下载完成移除元素
window.URL.revokeObjectURL(href); // 释放掉blob对象
}
网友评论