pdf.js插件使用记录,在线打开pdf
天记录一个js库:pdf.js。主要是实现在线打开pdf功能。因为项目需求需要能在线查看pdf文档,所以就研究了一下这个控件。
有些人很好奇,在线打开pdf文档浏览器不是支持吗。是的你说的都是现代浏览器,例如谷歌,360,edg等。
但是很不幸的是我们这个项目是要使用我们最喜欢(很烦)的浏览器IE。所有要想使IE能够在线读取pdf,我就知道两种办法第一种下载Acrobat Reader插件,第二就是使用js库了。
介绍pdf.js
pdf.js是一个开源的js库。
官网:http://mozilla.github.io/pdf.js/
源码地址:https://github.com/mozilla/pdf.js
下载并解压
我们在http://mozilla.github.io/pdf.js/getting_started/#download选中版本后下载后解压会生成两个文件夹:
这两个文件夹核心文件就是build文件下的js文件,web文件是官方给写好的封装示例,你你可选择使用或者不使用。
├── LICENSE ├── build/ │ ├── pdf.js - 显示层 │ └── pdf.worker.js - 核心层 └── web/├── cmaps/ - 字符映射(由核心要求)├── compressed.tracemonkey-pldi-09.pdf - 测试 pdf├── debugger.js - 有帮助的PDF调试功能├── images/ - 观看者和注释图标的图像├── l10n.js - 汉化├── locale/ - 翻译文件├── viewer.css - viewer 页面样式├── viewer.html - viewer 页面└── viewer.js - viewer js
使用:
使用pdf.js有两种方式:
- 第一种使用官方给写好的示例,简单来说就是上面提到的下载下来的web文件夹。
- 第二种就是自己调用API自己写方法实现,相对于第一种如果自己要的效果不是很多还是自己写。也不是很复杂很容易实现。官方给的代码太多修改维护太麻烦。
使用官方示例:
使用官方示例其实就是使用pdfjs已经写好的viewer.html页面,例子:http://mozilla.github.io/pdf.js/web/viewer.html 做的功能比较全面。
简单的来说一下吧,很多人可能下载之后直接打开会报错,其实那是因为出现了两个问题:第一个是没有文件,第二个是知道写文件但是存在跨域。就会产生如下错误:
出现这个问题其实也没事,只要我们引用到项目后就不会出现了。然后是我们在使用的地方打开这个页面并且加上文件即可:
window.location.href = "../../Content/js/PDFShow/padjs/web/viewer.html?file=pdfTest.pdf";
效果展示:
自己实现分页版:
我们自己实现的话就不需要web文件夹下的东西。你就可以删除了。
自己定义实现说起来也是很简单的,官方上已经给了很多代码示例了。废话我就不说了。我就上一下我的代码吧。
首先引入pdf.js文件到页面:
<script src="~/Content/js/PDFShow/padjs/build/pdf.js"></script>
引入pdf.js之后:
//引入pdf.js之后var url = '../pdfTest.pdf';PDFJS.workerSrc = '../../Content/js/PDFShow/padjs/build/pdf.worker.js';//定义变量var pdfDoc = null,pageNum = 1,pageRendering = false,pageNumPending = null,scale = 1,canvas = document.getElementById('the-canvas'),ctx = canvas.getContext('2d');function renderPage(num) {pageRendering = true;pdfDoc.getPage(num).then(function (page) {//设置页面大小var viewport = page.getViewport(1);console.log(viewport.width);var desiredWidth = "1000";var scale = desiredWidth / viewport.width;var scaledViewport = page.getViewport(scale);//var viewport = page.getViewport(scale);canvas.height = scaledViewport.height;canvas.width = scaledViewport.width;//设置背景颜色(无效)canvas.style.backgroundColor = "red";//进行文件读取加载var renderContext = {canvasContext: ctx,viewport: scaledViewport};var renderTask = page.render(renderContext);renderTask.promise.then(function () {pageRendering = false;if (pageNumPending !== null) {// New page rendering is pending renderPage(pageNumPending);pageNumPending = null;}});});//显示总页数document.getElementById('page_num').textContent = pageNum;}//翻页方法function queueRenderPage(num) {if (pageRendering) {pageNumPending = num;} else {renderPage(num);}}function onPrevPage() {if (pageNum <= 1) {return;}pageNum--;queueRenderPage(pageNum);}//上一页监听document.getElementById('prev').addEventListener('click', onPrevPage);function onNextPage() {if (pageNum >= pdfDoc.numPages) {return;}pageNum++;queueRenderPage(pageNum);}//下一页监听document.getElementById('next').addEventListener('click', onNextPage);PDFJS.getDocument(url).then(function (pdfDoc_) {pdfDoc = pdfDoc_;document.getElementById('page_count').textContent = pdfDoc.numPages;renderPage(pageNum);});
View Code
相应html代码:
<body style="background:#404040"><div><button id="prev">上一页</button><button id="next">下一页</button><span>Page: <span id="page_num"></span> / <span id="page_count"></span></span></div><div style="width:100%;height:100%;background:#404040"><div style=" width:1000px;margin: 0 auto;"><canvas id="the-canvas"></canvas></div></div> </body>
效果展示:
自己实现不分页版:
虽然分页很好用,但是确不一定使用所有的场景,比如我就是想一次性打开所有页面然后滚动查看跟读word似的,怎么办,有办法,当然是实现不分页喽,哈哈。
分页好理解啊:根据页数读取然后把读取的内容放到画布上就好了,既然我们明白分页的原理,那么我们稍稍改造一下就是不分页了吗。
不分页:我们全部读出来放到页面不就好了吗,简单来说是这个样,但是具体思路是=》我们先获取到所有页数,然后遍历的把每一页像分页一下放到画布上展示,然后在遍历相同数量画布来对应每页的内容,最后展现出来。
好了大致的思路已经明白了下面就是撸代码:
还是不要忘记引用js文件:
<script src="~/Content/js/PDFShow/padjs/build/pdf.js"></script>
页面布局就可以这样子了:
<div style="width:100%;height:100%;background:#404040"><div id="pdf-container" style=" width:1000px;margin: 0 auto;"></div></div>
然后初始化控件吧:
<script>//引入pdf.js之后// var url = '../pdfTest.pdf';PDFJS.workerSrc = '../../Content/js/PDFShow/padjs/build/pdf.worker.js';window.onload = function () {//创建canvas方法 function createPdfContainer(id, className) {var pdfContainer = document.getElementById('pdf-container');var canvasNew = document.createElement('canvas');canvasNew.id = id;canvasNew.className = className;pdfContainer.appendChild(canvasNew);};//渲染pdf function renderPDF(pdf, i, id) {pdf.getPage(i).then(function (page) {//默认设置文档的显示大小var scale = 1.5;var viewport = page.getViewport(scale);//// 准备用于渲染的 canvas 元素// var canvas = document.getElementById(id);var context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;//// 将 PDF 页面渲染到 canvas 上下文中// var renderContext = {canvasContext: context,viewport: viewport};page.render(renderContext);});};//创建和pdf页数等同的canvas数 function createSeriesCanvas(num, template) {var id = '';for (var j = 1; j <= num; j++) {id = template + j;createPdfContainer(id, 'pdfClass');}}//读取pdf文件,并加载到页面中 function loadPDF(fileURL) {PDFJS.getDocument(fileURL).then(function (pdf) {//用 promise 获取页面var id = '';var idTemplate = 'cw-pdf-';var pageNum = pdf.numPages;//根据页码创建画布 createSeriesCanvas(pageNum, idTemplate);//将pdf渲染到画布上去for (var i = 1; i <= pageNum; i++) {id = idTemplate + i;renderPDF(pdf, i, id);}});}//启动loadPDF('../pdfTest.pdf');};</script>
View Code
最后上一下效果展示截图:
转载于:https://www.cnblogs.com/lonelyxmas/p/9678722.html
pdf.js插件使用记录,在线打开pdf相关推荐
- java打开pdf文件_[原创]java在线打开PDF文档
步骤一:(涉及到的工具) 访问:http://www.zhuozhengsoft.com/dowm/,从官网下载PageOffice for Java. 步骤二:(配置工程) 1. 解压PageOff ...
- vue调用手机浏览器打开pdf_vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法...
目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框.网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受 ...
- 利用PDF.JS插件解决了本地pdf文件在线浏览问题(根据需要隐藏下载功能,只保留打印功能)
利用PDF.JS插件解决了本地pdf文件在线浏览问题(根据需要隐藏下载功能,只保留打印功能) 参考文章: (1)利用PDF.JS插件解决了本地pdf文件在线浏览问题(根据需要隐藏下载功能,只保留打印功 ...
- 前端使用pdf.js插件在线浏览pdf
vue中使用PDF.js_没理由的花呗的博客-CSDN博客_pdf.js vue 步骤 1.官网下载pdf.js插件放入一个公用方法文件夹中如utils 2.在需要使用的页面使用iframe标签 &l ...
- vue-cli使用pdf.js插件浏览pdf文件,禁止下载打印复制粘贴。
很多项目中都会有预览pdf文件,普通的可以直接使用a标签来实现该功能,但是此预览是浏览器自带的,有时候项目需求中会有禁止用户禁止下载和打印功能,浏览器自带的是无法满足的. 小编在网上找到pdf.js插 ...
- 使用 pdf.js 在网页中加载 pdf 文件
在网页中加载并显示PDF文件是最常见的业务需求.例如以下应用场景:(1)在电商网站上购物之后,下载电子发票之前先预览发票.(2)电子政务管理系统中查看发布的公文,公文文件一般是PDF格式的文件. 目前 ...
- java pdf在线阅读插件_JAVA实现在线查看PDF和office文档
一个项目中要做一个在线预览附件(和百度文库差不多)的小功能点,楼主在开发过程中踩了很多坑的同时也总结了一些方法,仅供广大猿友参考,那么要实现这个小功能,目前主要是有如下3种可行的实现方式,下面先说实现 ...
- vue中使用pdf.js插件打包后不显示插件及打包后动态修改接口地址
最近写了一个项目 需要在线展示pdf 实现方法是下载该插件并解压放到 static文件夹中 地址:http://mozilla.github.io/pdf.js/ 我在项目中使用iframe嵌套的方式 ...
- vue使用pdf.js实现移动端在线PDF文件预览
背景 产品需求涉及到动态的PDF展示,PDF是由后端去生成的,然后下发给前端在线的cdn地址,H5需要实现在线PDF预览的能力 方案 H5展示合同PDF,有很多实现方式.但是通过尝试后发现在不同操作系 ...
最新文章
- leetcode c程序总提示主函数_帅气中国小哥出“大招”,程序员跳槽面试刷题必备...
- 学python找工作有用吗-为什么我不建议你通过 Python 去找工作?
- cmd下,如何在文本的指定行添加内容
- Neo4j:遍历查询超时
- mysql和jfinal的区别_mysql与JFinal的数据关系-阿里云开发者社区
- 开发利器--JSONVIEW插件 网页json数据直接转换
- 进程分配之交叉分配法
- yacc c语言语法分析,编译原理实践--语法分析程序的自动生成工具YACC.PPT
- Android Studio实现用户登陆界面demo(xml实现)
- 芯片技术---芯片到底是什么?
- 移动硬盘安装双系统windows10和ubuntu18.04
- 后盾网php微博系统,后盾网thinkphp5.0 博客系统实现
- 基于word2vec的QA demo
- php amr mp3,php实现微信语音amr文件在线播放方法
- 大型医院影像PACS系统三维重建技术(获取数据、预处理、配准、重建和可视化)
- “音乐床”网页引用本地歌曲最佳途径
- 关于版权声明的格式 (Copyright)
- cstring头文件(cstring头文件)
- Amazon Aurora 故障恢复之降低 DNS 切换对应用影响篇
- 【SAP S/4 1511之变】:主数据之变
热门文章
- 结构专业规范大全_1.2万篇 建筑行业规范大全套!速来!
- ios html清除缓存图片,iOS,如何清理缓存的图片
- java没有打印mysql日志_0216 aop和打印数据库执行日志
- c mysql5.7_CentOS7下MySQL5.7的三种安装方式详解
- 玩游戏4g计算机的内存不足,玩游戏时出现存储空间不足, 无法完成此操作, 到底是何原因?...
- 分布式是什么意思_机架式ups是什么意思?与分布式DPS有何不同之处?
- woocommerce 分类到菜单_Woocommerce商店显示分类
- 160 - 36 cupofcoffe.2
- leetcode 51. N 皇后 思考分析
- LeetCode 404. 左叶子之和思考分析