如何用 JavaScript 下载文件

比眉伴天荒 2022-06-02 07:39 124阅读 0赞

*    
    
    
    ## 简介 ##
    
    我们知道，下载文件是一个非常常见的需求，但由于浏览器的安全策略的限制，我们通常只能通过一个额外的页面，访问某个文件的 url 来实现下载功能，但是这种用户体验非常不好。  
    幸好，HTML 5 里面为 `<a>` 标签添加了一个 `download` 的属性，我们可以轻易的利用它来实现下载功能，再也不需要用以前的笨办法了。
    
    ## 原理 ##
    
    我们先看看 `download` 的使用方法：
    
    <table style="width:728px; border-width:0px; border-style:initial; border-color:initial; margin-right:0px; margin-bottom:0px; margin-left:0px; table-layout:fixed"> 
     <tbody> 
      <tr> 
       <td style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-width:0px; border-style:initial; border-color:initial; width:728px"> <pre style="overflow-x:auto; overflow-y:hidden; font-family:Monaco; font-size:1em; line-height:1.5em; margin-right:0px; margin-bottom:0px; margin-left:0px; background-color:transparent">
           
            
         <div>
            
             
          <span style="color:rgb(41,115,183)">&lt;<span style="color:rgb(82,82,82)">a</span> <span>href</span>=<span style="color:rgb(26,188,156)">"http://somehost/somefile.zip"</span> <span>download</span>=<span style="color:rgb(26,188,156)">"filename.zip"</span>&gt;</span>Download file
            
             
          <span style="color:rgb(41,115,183)">&lt;/<span style="color:rgb(82,82,82)">a</span>&gt;</span>
           
            
         </div></pre> </td> 
      </tr> 
     </tbody> 
    </table>
    
    看看上面的代码，只要为 `<a>` 标签添加 `download` 属性，我们点击这个链接的时候就会自动下载文件了~  
    顺便说下，`download` 的属性值是可选的，它用来指定下载文件的文件名。像上面的例子中，我们下载到本地的文件名就会是 filename.zip 拉，如果不指定的话，它就会是 somefile.zip 这个名字拉！
    
    看到这里，你可能会说，坑爹啊，这明明是用 HTML 5 的新特性来实现下载文件嘛，说好的用 JavaScript 下载文件呢？
    
    事实上，用 JavaScript 来下载文件也是利用这一特性来实现的，我们的 JavaScript 代码不外乎就是：
 *  1.用 JavaScript 创建一个隐藏的 `<a>` 标签
 *  2.设置它的 `href` 属性
 *  3.设置它的 `download` 属性
 *  4.用 JavaScript 来触发这个它的 `click` 事件

翻译成 JavaScript 代码就是：

好拉，是不是看到有个陌生的东东呢？

## window.URL ##

`window.URL` 里面有两个方法：

*  `createObjectURL` 用 blob 对象来创建一个 object URL(它是一个 `DOMString`)，我们可以用这个 object URL 来表示某个 blob 对象，这个 object URL 可以用在 `href` 和 `src` 之类的属性上。
 *  `revokeObjectURL` 释放由 `createObjectURL` 创建的 object URL，当该 object URL 不需要的时候，我们要主动调用这个方法来获取最佳性能和内存使用。

知道了这两个方法之后，我们再回去看看上面的例子就很容易理解了吧！只是用 blob 对象来创建一条 URL，然后让 `<a>` 标签引用该 URL，然后触发个点击事件，就可以下载文件了！

那么问题来了，blob 对象哪里来？

## Blob 对象 ##

Blob 全称是 Binary large object，它表示一个类文件对象，可以用它来表示一个文件。根据 [MDN][] 上面的说法，`File API` 也是基于 blob 来实现的。

由于本文的主题是讲 JavaScript 下载文件，那我们构建 blob 的方式就是通过服务器返回的文件来创建 blob 拉！  
而最简单的方式就是用 `fetch API` 了，我们可以整合上面的例子：

<table style="width:728px; border-width:0px; border-style:initial; border-color:initial; margin-right:0px; margin-bottom:0px; margin-left:0px; table-layout:fixed"> 
 <tbody> 
  <tr> 
   <td style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-width:0px; border-style:initial; border-color:initial; width:728px"> <pre style="overflow-x:auto; overflow-y:hidden; font-family:Monaco; font-size:1em; line-height:1.5em; margin-right:0px; margin-bottom:0px; margin-left:0px; background-color:transparent">
     
      
     <div>
      
       
      fetch(
      
       
      <span style="color:rgb(26,188,156)">'http://somehost/somefile.zip'</span>).then(
      
       
      <span style="color:rgb(82,82,82)"><span>res</span> =&gt;</span> res.blob().then(
      
       
      <span style="color:rgb(82,82,82)"><span>blob</span> =&gt;</span> {
     
      
     </div>
     
      
     <div>    
      
       
      <span style="color:rgb(233,105,0)">var</span> a = 
      
       
      <span style="color:rgb(26,188,156)">document</span>.createElement(
      
       
      <span style="color:rgb(26,188,156)">'a'</span>);
     
      
     </div>
     
      
     <div>    
      
       
      <span style="color:rgb(233,105,0)">var</span> url = 
      
       
      <span style="color:rgb(26,188,156)">window</span>.URL.createObjectURL(blob);
     
      
     </div>
     
      
     <div>    
      
       
      <span style="color:rgb(233,105,0)">var</span> filename = 
      
       
      <span style="color:rgb(26,188,156)">'myfile.zip'</span>;
     
      
     </div>
     
      
     <div>
      
       
          a.href = url;
     
      
     </div>
     
      
     <div>
      
       
          a.download = filename;
     
      
     </div>
     
      
     <div>
      
       
          a.click();
     
      
     </div>
     
      
     <div>    
      
       
      <span style="color:rgb(26,188,156)">window</span>.URL.revokeObjectURL(url);
     
      
     </div>
     
      
     <div>
      
       
      }))
     
      
     </div></pre> </td> 
  </tr> 
 </tbody> 
</table>

很简单对吧！

你可能会问，何必这么麻烦呢？直接写成下面这样不就好了：

嗯，对于这种写法，我只能说，你做的太正确了！如果你要下载的是已经存在服务器上面的静态文件的话，那么写成这样是最方便的。浏览器会帮你处理整个下载过程，不需要你干涉。如果你用 blob 的方式来下载文件的话，会有下面这些限制的：

### 限制一：不同浏览器对 blob 对象有不同的限制 ###

具体看看下面这个表格（出自 [FileSaver.js][]）：

<table style="width:760px; border-color:rgb(223,223,223); margin-bottom:30px; table-layout:fixed; color:rgb(0,0,0); font-family:PingFangSC-Regular,Roboto,Verdana,&quot;Open Sans&quot;,&quot;Helvetica Neue&quot;,Helvetica,&quot;Hiragino Sans GB&quot;,&quot;Microsoft YaHei&quot;,&quot;Source Han Sans CN&quot;,&quot;WenQuanYi Micro Hei&quot;,Arial,sans-serif"> 
 <thead> 
  <tr> 
   <th style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-bottom-width:2px; border-color:rgb(223,223,223); font-size:15px"> Browser</th> 
   <th style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-bottom-width:2px; border-color:rgb(223,223,223); font-size:15px"> Constructs as</th> 
   <th style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-bottom-width:2px; border-color:rgb(223,223,223); font-size:15px"> Filenames</th> 
   <th style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-bottom-width:2px; border-color:rgb(223,223,223); font-size:15px"> Max Blob Size</th> 
   <th style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-bottom-width:2px; border-color:rgb(223,223,223); font-size:15px"> Dependencies</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Firefox 20+</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Blob</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Yes</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> 800 MiB</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> None</td> 
  </tr> 
  <tr> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Firefox &lt; 20</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> data: URI</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> No</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> n/a</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> <a href="https://github.com/eligrey/Blob.js" style="background-color:transparent; color:rgb(26,188,156)" rel="nofollow">Blob.js</a></td> 
  </tr> 
  <tr> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Chrome</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Blob</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Yes</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> 500 MiB</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> None</td> 
  </tr> 
  <tr> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Chrome for Android</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Blob</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Yes</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> 500 MiB</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> None</td> 
  </tr> 
  <tr> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Edge</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Blob</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Yes</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> ?</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> None</td> 
  </tr> 
  <tr> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> IE 10+</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Blob</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Yes</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> 600 MiB</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> None</td> 
  </tr> 
  <tr> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Opera 15+</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Blob</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Yes</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> 500 MiB</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> None</td> 
  </tr> 
  <tr> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Opera &lt; 15</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> data: URI</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> No</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> n/a</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> <a href="https://github.com/eligrey/Blob.js" style="background-color:transparent; color:rgb(26,188,156)" rel="nofollow">Blob.js</a></td> 
  </tr> 
  <tr> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Safari 6.1+*</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Blob</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> No</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> ?</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> None</td> 
  </tr> 
  <tr> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> Safari &lt; 6</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> data: URI</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> No</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> n/a</td> 
   <td style="padding-right:8px; padding-left:8px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-color:rgb(223,223,223); font-size:15px"> <a href="https://github.com/eligrey/Blob.js" style="background-color:transparent; color:rgb(26,188,156)" rel="nofollow">Blob.js</a></td> 
  </tr> 
 </tbody> 
</table>

### 限制二：构建完 blob 对象后才会转换成文件 ###

这一点限制对小文件(几十kb)可能没什么影响，但对稍微大一点的文件影响就很大了。试想，用户要下载一个 100mb 的文件，如果他点击了下载按钮之后没看到下载提示的话，他肯定会继续按，等他按了几次之后还没看到下载提示时，他就会抱怨我们的网站，然后离开了。

然而事实上下载的的确确发生了，只是要等到下载完文件之后才能构建 blob 对象，再转化成文件。而且，用户再触发多几次下载就会造成一些资源上的浪费。

因此，如果是要下载大文件的话，还是推荐直接创建一个 `<a>` 标签拉~  
写 html 也好，写 JavaScript 动态创建也好，用自己喜欢的方式去创建就好了。

## 为什么要用 JavaScript 下载文件 ##

好拉，说了半天，其实我们一直说的都是：「不要用 JavaScript 下载文件拉，限制多多，又不好用，直接用 html 就好拉，简单方便又快捷」这个论调。  
事实上也确实如此，但有些时候我们确实需要通过 JavaScript 来做一些预处理。

### 权限校验 ###

有些时候，我们需要对下载做一些限制，最常见的就是权限校验了，如检查该用户是否有下载的权限，是否有高速下载的权限等等。这时候，我们可以利用 JavaScript 做一些预处理。如：

<table style="width:728px; border-width:0px; border-style:initial; border-color:initial; margin-right:0px; margin-bottom:0px; margin-left:0px; table-layout:fixed"> 
 <tbody> 
  <tr> 
   <td style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border-width:0px; border-style:initial; border-color:initial; width:728px"> <pre style="overflow-x:auto; overflow-y:hidden; font-family:Monaco; font-size:1em; line-height:1.5em; margin-right:0px; margin-bottom:0px; margin-left:0px; background-color:transparent">
     
      
     <div>
      
       
      fetch(
      
       
      <span style="color:rgb(26,188,156)">'http://somehost/check-permission'</span>, options).then(
      
       
      <span style="color:rgb(82,82,82)"><span>res</span> =&gt;</span> {
     
      
     </div>
     
      
     <div>    
      
       
      <span style="color:rgb(233,105,0)">if</span> (res.code === 
      
       
      <span style="color:rgb(174,129,255)">0</span>) {
     
      
     </div>
     
      
     <div>        
      
       
      <span style="color:rgb(233,105,0)">var</span> a = 
      
       
      <span style="color:rgb(26,188,156)">document</span>.createElement(
      
       
      <span style="color:rgb(26,188,156)">'a'</span>);
     
      
     </div>
     
      
     <div>        
      
       
      <span style="color:rgb(233,105,0)">var</span> url = res.data.url;
     
      
     </div>
     
      
     <div>        
      
       
      <span style="color:rgb(233,105,0)">var</span> filename = 
      
       
      <span style="color:rgb(26,188,156)">'myfile.zip'</span>;
     
      
     </div>
     
      
     <div>
      
       
              a.href = url;
     
      
     </div>
     
      
     <div>
      
       
              a.download = filename;
     
      
     </div>
     
      
     <div>
      
       
              a.click();
     
      
     </div>
     
      
     <div>
      
       
          } 
      
       
      <span style="color:rgb(233,105,0)">else</span> {
     
      
     </div>
     
      
     <div>
      
       
              alert(
      
       
      <span style="color:rgb(26,188,156)">'You have no permission to download the file!'</span>);
     
      
     </div>
     
      
     <div>
      
       
          }
     
      
     </div>
     
      
     <div>
      
       
      });
     
      
     </div></pre> </td> 
  </tr> 
 </tbody> 
</table>

在这个例子里面，我们没有用 blob 来构建 URL，而是通过后端服务器来计算出用户的下载链接，然后再利用之前提到的动态创建 `<a>` 标签的方式来实现下载，很简单吧！

### 动态文件 ###

动态生成文件然后返回给客户端也是一个很常见的需求，譬如我们有时候需要做导出数据的功能，把数据库中的某些数据导出到 Excel 中，然后再返回客户端。  
这时候我们就不能简单的指定 `href` 属性，因为对应的 URL 并不存在。  
我们只能通过 JavaScript 对服务器发出一个请求，通知它去生成某个文件，然后把对应的 URL 返回给客户端。  
有没有感觉这个过程和上面「权限校验」一节很像？肯定拉，因为我们只是对 URL 做了一些预处理而已嘛~

## 注意事项 ##

由于 `download` 属性是 HTML 5 的新特性，因此它不支持旧版本的浏览器。

## 总结 ##

HTML 5 新的 `download` 特性真的很好用，结合 JavaScript 的动态能力我们可以很方便的做出复杂的下载功能~

## 参考资料 ##

[https://github.com/eligrey/FileSaver.js/blob/master/FileSaver.js][https_github.com_eligrey_FileSaver.js_blob_master_FileSaver.js]  
[https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL][https_developer.mozilla.org_en-US_docs_Web_API_URL_createObjectURL]  
[https://developer.mozilla.org/en-US/docs/Web/API/Blob][MDN]  
[http://stackoverflow.com/questions/19327749/javascript-blob-filename-without-link][http_stackoverflow.com_questions_19327749_javascript-blob-filename-without-link]  
[http://stackoverflow.com/questions/24501358/how-to-set-a-header-for-a-http-get-request-and-trigger-file-download][http_stackoverflow.com_questions_24501358_how-to-set-a-header-for-a-http-get-request-and-trigger-file-download]  
[http://blog.bguiz.com/2014/07/03/file-download-with-http-request-header/][http_blog.bguiz.com_2014_07_03_file-download-with-http-request-header]

[MDN]: https://developer.mozilla.org/en-US/docs/Web/API/Blob
[FileSaver.js]: https://github.com/eligrey/FileSaver.js#supported-browsers
[https_github.com_eligrey_FileSaver.js_blob_master_FileSaver.js]: https://github.com/eligrey/FileSaver.js/blob/master/FileSaver.js
[https_developer.mozilla.org_en-US_docs_Web_API_URL_createObjectURL]: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
[http_stackoverflow.com_questions_19327749_javascript-blob-filename-without-link]: http://stackoverflow.com/questions/19327749/javascript-blob-filename-without-link
[http_stackoverflow.com_questions_24501358_how-to-set-a-header-for-a-http-get-request-and-trigger-file-download]: http://stackoverflow.com/questions/24501358/how-to-set-a-header-for-a-http-get-request-and-trigger-file-download
[http_blog.bguiz.com_2014_07_03_file-download-with-http-request-header]: http://blog.bguiz.com/2014/07/03/file-download-with-http-request-header/