关于js文件下载

今天公司项目下载文件出啦问题 因为之前没经验 一直认为跳转url即可下载 今天就给自己普及和记录下关于下载文件这块

我所知道的请求地址，就会自动下载的具体的方式如下：

1、iframe   加载请求此地址时会自动下载 //据说兼容先较好，推荐，使用的时候吧iframe设置为display;none即可

<iframe name="hehe" src='下载url'></iframe>

2、a     点击请求此地址时会自动下载

<a href="下载url">下载</a>
H5的download属性 <a download href="下载url">下载</a>

这时候，如果返回的是img这种浏览器可以打开的文件时，也会下载（否则会直接打开）

3、form    发起submit请求此地址时会自动下载

复制代码

<form 
   action="下载ur"
   method="get" 
>
 <button type="submit">下载</button>
</form>

复制代码 4、window.location.href 赋值为此地址时会自动下载 ，如果是其他地址，会跳转，但，当是下载的url，浏览器会发起请求，下载下来，并且不会改变本页的 window.location.href

window.location.href = “下载url”

4、window.open     赋值为此地址时会自动下载 ，但会先打开新标签页再下载再关闭新标签页，体验不佳

window.open = “下载url”

但是用了这几种方式都无法正确下载文件 和后端交流后说是需要携带token 于是在百度老哥的帮助下搜索如下：

    let token = Cookies.get('token');
    let url= ""; // 文件地址
    let xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 设置请求头，必须在open后添加
    xhr.setRequestHeader('authorization', token);//设置TOKEN
    xhr.responseType = 'blob'; // 返回类型blob  blob 存储着大量的二进制数据
    xhr.onload = function () {
      if (this.status === 200) {
        let blob = this.response;
        let reader = new FileReader();
        reader.readAsDataURL(blob); // 转换为base64，可以直接放入a标签href
        reader.onload = function (e) {
          let a = document.createElement('a'); // 转换完成，创建一个a标签用于下载
          a.download = name + '.png';//可以修改文件名称
          console.log(e)
          a.href = e.target.result;
          a.click();
        };
      }
    }
    xhr.send(); // 发送ajax请求

转自原文 blog.csdn.net/shelbyandfx…

最后成功的下载文件 感谢大大的帮助。

第一次写博客有不对或者更深层次的欢迎指点下。