关于前端:如何用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>jsfunction 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 间接下载