JS实现URL下载同源用a标签的download属性下载，非同源用bolb方法实现隐式下载，只要修改两个地方，就能够实现

开发需求中，遇到了说要上传附件，然后在另外一个页面需要点击后端传来的附件url地址实现点击下载，我第一个反应就是a标签的download属性，于是有了下面的代码

<a :href="item.url" :download="item.name" target="_blank" >{{item.name}}</a>

但是，当我点击的时候，发现并没有下载，而是打开了页面，原来是我们服务端和前端的地址部署在不同的服务器：download仅支持同源策略，如果非同源的话，download会失效且直接跳转到相对应href的界面

那只能另寻出路了，于是我找到了大佬的方法，这边记录一下~ blob方法：

   let url ="url"; 
   let name ="百度.docx";
   const downloadRes = async () => {
      let response = await fetch(url); // 内容转变成blob地址
      let blob = await response.blob();  // 创建隐藏的可下载链接
      let objectUrl = window.URL.createObjectURL(blob);
      let a = document.createElement('a');
      a.href = objectUrl;
      a.download = name;
      a.click()
      a.remove(); 
   }
  downloadRes();

咱们要做的就是修改几个地方就能用了

HTML：
<div @click="downLoadFile(item)" >{{item.name}}</div>
JS:
downLoadFile(file) {
   let url =file.url;   //1.修改url
   let name =file.name; // 2. 修改name是包含文件格式后缀的，如果没有就要字符串拼接上去，这里决定文件下载的格式
   const downloadRes = async () => {
      let response = await fetch(url); // 内容转变成blob地址
      let blob = await response.blob();  // 创建隐藏的可下载链接
      let objectUrl = window.URL.createObjectURL(blob);
      let a = document.createElement('a');
      a.href = objectUrl;
      a.download = name;
      a.click()
      a.remove(); 
   }
  downloadRes();
}

好吧，这里只是踩了个坑，记录下学习到的东西，嘿嘿，至于原理，等有空了再来补充

其他有趣文章的传送门：