js 通过流的方式进行下载

墨蓝 2023-06-27 03:08 27阅读 0赞

## 背景 ##

项目上需要用到多语言，项目设计语言选择是通过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;  //接口响应后的处理
            let elink = document.createElement("a");// 组装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`][DOMString]，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 [`document`][document] 绑定。这个新的URL 对象表示指定的 [`File`][File] 对象或 [`Blob`][Blob] 对象。

**内存管理**

在每次调用 `createObjectURL()` 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 [`URL.revokeObjectURL()`][URL.revokeObjectURL] 方法来释放。浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。

### **XMLHttpRequest.responseType** ###

XMLHttpRequest.responseType** **属性是一个枚举类型的属性，返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串，它将使用默认的"text"类型。

在工作环境(Work Environment)中将responseType的值设置为"document"通常会被忽略. 当将responseType设置为一个特定的类型时，你需要确保服务器所返回的类型和你所设置的返回值类型是兼容的。那么如果两者类型不兼容呢?恭喜你，你会发现服务器返回的数据变成了null，即使服务器返回了数据。还有一个要注意的是，给一个同步请求设置responseType会抛出一个`InvalidAccessError` 的异常。

responseType支持以下几种值：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>""</code></td> 
   <td>将&nbsp;<code>responseType</code>&nbsp;设为空字符串与设置为<code>"text"</code>相同， 是默认类型 （实际上是&nbsp;<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString" rel="nofollow"><code>DOMString</code></a>）。</td> 
  </tr> 
  <tr> 
   <td><code>"arraybuffer"</code></td> 
   <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/response" rel="nofollow"><code>response</code></a>&nbsp;是一个包含二进制数据的 JavaScript&nbsp;<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer" rel="nofollow"><code>ArrayBuffer</code></a>&nbsp;。</td> 
  </tr> 
  <tr> 
   <td><code>"blob"</code></td> 
   <td><code>response</code>&nbsp;是一个包含二进制数据的&nbsp;<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Blob" rel="nofollow"><code>Blob</code></a>&nbsp;对象 。</td> 
  </tr> 
  <tr> 
   <td><code>"document"</code></td> 
   <td><code>response</code>&nbsp;是一个&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML" rel="nofollow">HTML</a>&nbsp;<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document" rel="nofollow"><code>Document</code></a>&nbsp;或&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Glossary/XML" rel="nofollow">XML</a>&nbsp;<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/XMLDocument" rel="nofollow"><code>XMLDocument</code></a>&nbsp;，这取决于接收到的数据的 MIME 类型。请参阅&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest" rel="nofollow">HTML in XMLHttpRequest</a>&nbsp;以了解使用 XHR 获取 HTML 内容的更多信息。</td> 
  </tr> 
  <tr> 
   <td><code>"json"</code></td> 
   <td><code>response</code>&nbsp;是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON" rel="nofollow">JSON</a>&nbsp;解析得到的。</td> 
  </tr> 
  <tr> 
   <td><code>"text"</code></td> 
   <td><code>response</code>&nbsp;是包含在&nbsp;<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString" rel="nofollow"><code>DOMString</code></a>&nbsp;对象中的文本。</td> 
  </tr> 
  <tr> 
   <td><code>"moz-chunked-arraybuffer"</code>&nbsp;</td> 
   <td> <p>与<code>"arraybuffer"</code>相似，但是数据会被接收到一个流中。使用此响应类型时，响应中的值仅在&nbsp;<code>progress</code>&nbsp;事件的处理程序中可用，并且只包含上一次响应&nbsp;<code>progress</code>&nbsp;事件以后收到的数据，而不是自请求发送以来收到的所有数据。</p> <p>在&nbsp;<code>progress</code>&nbsp;事件处理时访问&nbsp;<code>response</code>&nbsp;将返回到目前为止收到的数据。在&nbsp;<code>progress</code>&nbsp;事件处理程序之外访问，&nbsp;<code>response</code>&nbsp;的值会始终为&nbsp;<code>null</code>&nbsp;。</p> </td> 
  </tr> 
  <tr> 
   <td><code>"ms-stream"</code>&nbsp;</td> 
   <td><code>response</code>&nbsp;是下载流的一部分；此响应类型仅允许下载请求，并且仅受Internet Explorer支持。</td> 
  </tr> 
 </tbody> 
</table>

[MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
[DOMString]: https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString
[document]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document
[File]: https://developer.mozilla.org/zh-CN/docs/Web/API/File
[Blob]: https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
[URL.revokeObjectURL]: https://developer.mozilla.org/zh-CN/docs/Web/API/URL/revokeObjectURL