背景
项目上需要用到多语言，项目设计语言选择是通过header传递的，如果直接用平时location.href下载并无法实现这个效果，然后在网上查阅了一些资料，可以通过流处理来实现下载，代码如下
downloadFile(){
let timestamp = new Date().getTime(); //时间戳
let url =XXXXXXXXXXXX;
let xmlResquest = new XMLHttpRequest();
xmlResquest.open("GET", url, true);
xmlResquest.setRequestHeader("Authorization", "bearer" + this.token); //token验证
xmlResquest.responseType = "blob";
xmlResquest.onload = function(oEvent) { //接口响应后的处理
var content = xmlResquest.response; // 组装a标签
let elink = document.createElement("a");// 设置下载文件名
elink.download = "track-kml-" + timestamp + ".kml";
elink.style.display = "none";
let blob = new Blob([content]);
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
URL.revokeObjectURL(blob); //释放对象
};
xmlResquest.send();
}
本着不懂就学的原则，查阅了部分不懂的方法，以下资料来源MDN
URL.createObjectURL
URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
内存管理
在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。
XMLHttpRequest.responseType
XMLHttpRequest.responseType 属性是一个枚举类型的属性，返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串，它将使用默认的"text"类型。
在工作环境(Work Environment)中将responseType的值设置为"document"通常会被忽略. 当将responseType设置为一个特定的类型时，你需要确保服务器所返回的类型和你所设置的返回值类型是兼容的。那么如果两者类型不兼容呢?恭喜你，你会发现服务器返回的数据变成了null，即使服务器返回了数据。还有一个要注意的是，给一个同步请求设置responseType会抛出一个InvalidAccessError 的异常。
responseType支持以下几种值：
| 值 | 描述 |
|---|---|
| "" | 将 responseType 设为空字符串与设置为"text"相同， 是默认类型 （实际上是 DOMString）。 |
| "arraybuffer" | response 是一个包含二进制数据的 JavaScript ArrayBuffer 。 |
| "blob" | response 是一个包含二进制数据的 Blob 对象 。 |
| "document" | response 是一个 HTML Document 或 XML XMLDocument ，这取决于接收到的数据的 MIME 类型。请参阅 HTML in XMLHttpRequest 以了解使用 XHR 获取 HTML 内容的更多信息。 |
| "json" | response 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 JSON 解析得到的。 |
| "text" | response 是包含在 DOMString 对象中的文本。 |
| "moz-chunked-arraybuffer" |
与"arraybuffer"相似，但是数据会被接收到一个流中。使用此响应类型时，响应中的值仅在 progress 事件的处理程序中可用，并且只包含上一次响应 progress 事件以后收到的数据，而不是自请求发送以来收到的所有数据。
在 progress 事件处理时访问 response 将返回到目前为止收到的数据。在 progress 事件处理程序之外访问， response 的值会始终为 null 。|
|"ms-stream" |response 是下载流的一部分；此响应类型仅允许下载请求，并且仅受Internet Explorer支持。|
网友评论