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

方法1:a 标签的download 属性

如果直接通过 
 
会在浏览器中直接打开这个文件
我们可以加上 download 属性 


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

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

html
直接下载不打开

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 直接下载