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

简介: 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)
},
相关文章
|
13天前
|
Web App开发 Windows
【Windows】 chrome 如何下载网站在线预览PDF文件,保存到本地
【Windows】 chrome 如何下载网站在线预览PDF文件,保存到本地
200 0
|
13天前
|
JavaScript 前端开发 网络安全
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
28 4
|
13天前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
16 3
|
3天前
|
文字识别 测试技术 数据安全/隐私保护
案例:批量区域识别内容重命名,批量识别扫描PDF区域内容识别重命名,批量识别图片区域内容重命名图片修改图片名字,批量识别图片区域文字并重命名,批量图片部分识别内容重命文件,PDF区域内容提取重命名
该内容介绍了如何使用区域识别重命名软件高效整理图片,例如将图片按时间及内容重命名,适用于简历、单据等识别。文中提供了软件下载链接(百度云盘和腾讯网盘),并列出软件使用的几个关键条件,包括文字清晰、文件名长度限制等。示例展示了银行单据和公司工作单据的识别情况。文章还提及OCR技术在图片文字识别中的应用,强调了识别率、误识率和用户友好性等评估指标。如有类似需求,读者可留言或下载软件测试,并提供图片以获取定制的识别方案。
小白入门必备!计算机科学教程的Python精要参考PDF开放下载!
随着互联网产业的高速发展,在网络上早已积累了极其丰富的Python学习资料,任何人都可以基于这些资源,自学掌握 Python。 但实际上,网络上充斥的资源太多、太杂且不成体系,在没有足够的编程/工程经验之前,仅靠“看”线上资源自学,的确是一件非常困难的事。
|
8天前
|
数据采集 数据安全/隐私保护 Python
2024年最新【Python】如何用Python来操作PDF文件,收藏(2),2024年最新阿里p7Python面试题
2024年最新【Python】如何用Python来操作PDF文件,收藏(2),2024年最新阿里p7Python面试题
2024年最新【Python】如何用Python来操作PDF文件,收藏(2),2024年最新阿里p7Python面试题
|
11天前
|
Python
【Python3 查询手册学习】,完整版PDF开放下载_python速查手册·模块卷(全彩版) pdf(1)
【Python3 查询手册学习】,完整版PDF开放下载_python速查手册·模块卷(全彩版) pdf(1)
|
13天前
|
前端开发 JavaScript 安全
【网络安全】WebPack源码(前端源码)泄露 + jsmap文件还原
【网络安全】WebPack源码(前端源码)泄露 + jsmap文件还原
47 0
|
13天前
|
弹性计算 运维 Shell
|
13天前
|
前端开发 UED
🌟前端分页加载/懒加载预览PDF🌟
🌟前端分页加载/懒加载预览PDF🌟