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

Posted 2021-09-07 不懂

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