关于前端:如何用js在pc页面不打开新页面就直接下载PDF的方式

办法 1:a 标签的 download 属性

 如果间接通过 
<a href="https://xx.com/a.pdf" /> 
会在浏览器中间接关上这个文件
咱们能够加上 download 属性 
<a href="https://xx.com/a.pdf" download/>

download 属性的限度：文件和页面域名必须满足同源策略 

办法 2: 通过接口跨域申请，动态创建 a 标签，以 blob 模式下载（话不多说，间接 show fuck code）

html
<a href="#" @click="down" id="donwload"> 间接下载不关上 </a>

js

function fileLinkToStreamDownload(url, fileName, type) {let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/;
   if (!reg.test(url)) {throw new Error("传入参数不非法, 不是规范的文件链接");
   } else {let xhr = new XMLHttpRequest();
     xhr.open('get', url, true);
     xhr.setRequestHeader('Content-Type', `application/${type}`);
    xhr.responseType = "blob";
     xhr.onload = function () {if (this.status == 200) {
         // 承受二进制文件流
         console.log(this)
         var blob = this.response;
         const blobUrl = window.URL.createObjectURL(blob);
          // 这里的文件名依据理论状况从响应头或者 url 里获取
          const a = document.createElement('a');
          a.href = blobUrl;
          a.download = fileName;
          a.click();
          window.URL.revokeObjectURL(blobUrl);
       }
     }
     xhr.send();}
 }


down () {
   var url = 'https://xx.com/xx.pdf';
   var name = "下载文件名";
   ileLinkToStreamDownload(url, name, 'pdf')
}

办法 3: 第三种形式，后端设置下载申请的响应头 Content-Disposition 强制下载

前端只须要 window.open(url) 即可在 pc 间接下载