下载
通常我们上传文件为了使得链接保持唯一性，会使用时间戳作为url的一部分，例如下面这个地址
http://fimage.oss-cn-shenzhen.aliyuncs.com/upload/file/20200729/1595992792317092560.pdf
这个地址是时间戳形式的，直接打开下载的话文件名会自动变为时间戳，那么这个时候需求就来了，相信各位上传文件，是将文件名也一起存储了的，那么就可以通过下面这种形式来下载，即转blob流的形式
//url:pdf网络地址，filename:需要下载时存在的文件名 download(url, filename) { this.getBlob(url, (blob)=> { this.saveAs(blob, filename); }); }, getBlob(url, cb) { let xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'blob'; xhr.onload = function () { if (xhr.status === 200) { cb(xhr.response); } }; xhr.send(); }, saveAs(blob, filename) { if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, filename); } else { let link = document.createElement('a'); let body = document.querySelector('body'); link.href = window.URL.createObjectURL(blob); link.download = filename; // fix Firefox link.style.display = 'none'; body.appendChild(link); link.click(); body.removeChild(link); window.URL.revokeObjectURL(link.href); }; }
以上可兼容各情况pdf下载
预览
pdf链接原本是可以直接打开预览的，但可能会出现一些域名上的需求，导致后端无法再配置，所以这种情况就需要前端来处理了，同样，也是转为blob流
previewPDF(url, filename) { this.getBlob(url, (blob)=> { this.previewAS(blob, filename); }); }, getBlob(url, cb) { let xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'blob'; xhr.onload = function () { if (xhr.status === 200) { cb(xhr.response); } }; xhr.send(); }, previewAS(blob, filename){ blob = new Blob([blob], { type: 'application/pdf;chartset=UTF-8' }) let fileURL = URL.createObjectURL(blob) window.open(fileURL) },
