js实现灵活下载和预览网络链接pdf文件-CFANZ编程社区

js实现灵活下载和预览网络链接pdf文件

下载

通常我们上传文件为了使得链接保持唯一性，会使用时间戳作为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)
},

0 条评论