js调用数科阅读器_pdf.js实现在HTML下直接浏览pdf文档,无需插件即可实现
近期,有一个朋友做B端,服务器存了大量的金融类数据,很多都是pdf文档,他现在的做法是,先将pdf文档转换成flash,再放到浏览器上给用户浏览,但是他告诉我,这种体验太差了,而且很好资源,空间已经快不够了,向我咨询有没有可以直接读取pdf文档的,我之前也没做过,于是,我简单搜索了一下,还真是有,下面给大家整理出来,供大家参考。
pdf.js是一款开源的pdf文档读取解析插件,据说在HTML5下诞生的,对于主流的浏览器基本都支持。
官网GitHub地址如下:https://github.com/mozilla/pdf.js
由于官网项目文件过多,不太容易理解,因此,我自己针对此项目做了一个简单的Demo,Demo参考地址如下:
1.新窗口浏览pdf文档:http://www.51purse.com/pdf/web/viewer.html?name=b.pdf
2.点击连接读取第一页的pdf文档:http://www.51purse.com/pdf/web/demo1.html
3.点击连接,选择需要打开的文件,进行pdf预览:http://www.51purse.com/pdf/web/demo2.html
pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,,一个负责API解析,一个负责核心解析
比如Demo1,点击连接,可在当前页面打开一个pdf文档,进行预览,代码剖析
1.引入pdf.js
2.解析读取pdf
functionshowPdf(){
PDFJS.workerSrc= '../build/pdf.worker.js';//加载核心库
PDFJS.getDocument(url).then(functiongetPdfHelloWorld(pdf) {//
//获取第一页数据//pdf.getPage(1).then(functiongetPageHelloWorld(page) {var scale = 1.5;var viewport =page.getViewport(scale);//
//Prepare canvas using PDF page dimensions//var canvas = document.getElementById('the-canvas');var context = canvas.getContext('2d');
canvas.height=viewport.height;
canvas.width=viewport.width;//
//Render PDF page into canvas context//var renderContext ={
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
}
3.设置HTML标签
显示pdf文档
4.demo1是通过调用API自己解析,通常,我们直接使用官网的Demo,比如viewer.html,或者Demo2,官方已经为我们设置好了预览的皮肤和各种事件,因此,我只需要将官方的库引进去,会进行本地预览即可。
如果有人需要代码或者不明白的可以加入PDF群:707875596
作者:慕课讲师/河畔一角
前端基于Vue2.6/小程序/小程序云 + Node.js + MongoDB 全栈的微信支付、微信授权、微信好友/朋友圈分享等全栈课程,欢迎广大前端开发者购买观看
前端基于Vue2.0 + Node.js + MongoDB 全栈的慕课网课程,欢迎广大前端开发者购买观看
前端基于React16 + React-Router4.0 + Redux +AntD 慕课首门基于共享单车后台通用系统上线了,欢迎广大前端开发者观看
js调用数科阅读器_pdf.js实现在HTML下直接浏览pdf文档,无需插件即可实现相关推荐
- js转换html为pdf文件怎么打开方式,pdf.js实现在HTML下直接浏览pdf文档,无需插件即可实现...
pdf.js是一款开源的pdf文档读取解析插件,据说在HTML5下诞生的,对于主流的浏览器基本都支持. 官网GitHub地址如下:https://github.com/mozilla/pdf.js 由 ...
- js调用数科阅读器_阅读大型 JavaScript 源码时有什么好用的工具?
这是一个为了阅读复杂 JavaScript 代码而开发的工具,以阅读 Vue.js 为例,在 Sublime Text 中打开后感觉非常复杂,不知道该从哪里读起: 使用 lambda-view 打开后 ...
- 解决PDF阅读器 手型工具里有个箭头 点击文档出现页面放大问题
解决PDF阅读器 手型工具里有个箭头 点击文档出现页面放大问题 打开某些PDF文档,手形工具里还有一个箭头,若点击文档正文的任意部位,文档就会变大,可按以下操作取消 1.以福昕阅读器为例,操作是:文件 ...
- 华旭金卡js调用身份证阅读器和易联众社保卡阅读器
近期公司做身份证读卡器(华旭金卡的产品)和社保卡读卡器(易联众的产品)功能,识别后进行相应人员的参保信息查询.可算是长知识了,弄了整整两天.今天就总结一下,因为在华旭金卡的官网上只有c,pb,vb的D ...
- ❤️一文掌握HTML+CSS+JS开发小说阅读器❤️
上周<让CSS3中Transform属性带你一文实现炫酷的转盘抽奖效果>博文中说到这周出一篇介绍小说阅读器开发的博文,可能是离职不上班的原因,在家变得也懒散了一些,本来是打算上周三时候动手 ...
- 计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档)
计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档) 计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档) 本源 ...
- java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署 ...
- html页面导出文件大小,【实战】通过 JS 将 HTML 导出为 PDF 文档
背景介绍 某带道术用量确示常构端析以要效开的用,近不老人院信息管理系统项目,甲方要求将财务模块的各种报表导出为PDF文档,方便打印要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效 ...
- 利用pdf.js在线展示PDF文档
在Web项目中,经常需要在浏览器端展示PDF文档,本文通过一个简单的小例子,简述pdf.js的简单使用,仅供学习分享使用,如有不足之处,还请指正. pdf.js下载 pdf.js是一个通用的.基于we ...
- Adobe Reader 文档无法签名_手把手教你如何利用PDF阅读器压缩PDF文档
众所周知,PDF格式文本.格式.字体.颜色.分辨率.链接及图形图像.声音.动态影像等所有的信息封装在一个特殊的整合文件中.这个优点也导致我们工作学习上接触到的PDF文档体积都不小,非常影响阅读体验和邮 ...
最新文章
- 成为优秀高级程序员的10个要点(转)
- 财务报销人员是公司亲信的弊端
- 神经网络中的常用激活函数总结
- java swing事件监听_Java swing(awt):事件监听机制的实现原理+简单示例
- 恭贺微软技术俱乐部苏州站正式成立
- Hadoop生态Flume(一)介绍
- php url传递变量,php – 在laravel中通过url传递变量
- 一文读懂什么是P问题、NP问题和NPC问题
- 阿里云智能视频 AI 重装来袭
- 使用代理_工具的使用|MSF搭建socks代理
- java小数丢失精度_Java中的小数运算与精度损失
- 一些值得注意的算法题——双指针
- 【图像修复】基于matlab GUI运动模糊消除(逆滤波)【含Matlab源码 847期】
- PHP高并发和大流量解决方案
- 华为网络设备-访问控制列表配置实验
- ath9k usb wifi 网卡驱动浅析
- 治疗口腔溃疡的穴位按摩方法
- php 绘制斜线,css怎么绘制斜线
- Java OpenCV 图像处理34 图形图像 分水岭 watershed
- 【python教程】requests库的基本用法
热门文章
- 华为悦盒ec6108v9修改mac、sn、stbid修改实现移植到性能好的设备
- FFmpeg mxf扩展hdr、bt2020
- Pr视频剪辑软件使用小结
- Stata 16(统计学软件) v16.0中文版安装教程
- 黑苹果E3-1290 v2(ivy bridge架构)安装成功案例分享
- fso 拒绝访问_CTBS问题及解决.docx
- 在学习时,遇到in module ssbuild. File is included in 4 contexts
- php解析微信emoji字符
- 热敏打印机ESCPOS指令封装类,票据打印从此轻松,佳博系列实测通过
- 快递电子面单接口:四通一达,百世,邮政,顺丰,德邦等快递电子面单接口免费接入