如何用js在pc页面不打开新页面就直接下载PDF的方式
方法1:a 标签的download 属性
如果直接通过
会在浏览器中直接打开这个文件
我们可以加上 download 属性 download 属性的限制: 文件和页面域名必须满足同源策略
方法2:通过接口跨域请求,动态创建a标签,以blob形式下载(话不多说,直接show fuck code)
html
直接下载不打开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 = https://www.it610.com/article/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 强制下载
【如何用js在pc页面不打开新页面就直接下载PDF的方式】
前端只需要 window.open(url) 即可在pc 直接下载