使用pdf.js实现pdf文件的在线预览（有码源）

博客更新地址啦～，欢迎访问：https://jerryyuanj.github.io/

最近做移动项目（H5）时遇到一个需求，就是在线预览pdf文件。其实本来使用window.open()就可以实现了，但是这个API在IOS上是正常的打开Safari浏览器进行预览，在安卓上打开是则是下载预览，客户不满意；而且在将该应用嵌入到钉钉微应用时，这个API在安卓设备上根本不起效果。于是在网上找到了这个插件，去官网摘了个例子，并且结合移动端的上下左右滑动滑动翻页做了个例子，完美解决。以下是详细代码。注释都在代码中。

<html>
<head><meta charset="UTF-8"><title>pdf在线预览</title><script src="js/pdf.js" type="text/javascript"></script><style>button {display: flex;justify-content: center;align-items: center;background-color: lightseagreen;border: 1px solid transparent;border-radius: 5px;height: 30px;width: 70px;}.header-bar {background-color: cornflowerblue;height: 5%;display: flex;justify-content: center;align-items: center;color: white;font-size: 2em;}.pdf-container {background-color: gainsboro;display: flex;justify-content: center;align-items: center;height: 95%}canvas{width: 100%;height: 100%;}</style>
</head>
<body>
<div class="header-bar"><span>当前第 <span id="page_num"></span> 页    共<span id="page_count"></span>页</span>
</div>
<div class="pdf-container"><canvas id="the-canvas"></canvas>
</div></body>
<script type="text/javascript">var url = 'test-js.pdf';//  workerSrc的路径PDFJS.workerSrc = 'js/pdf.worker.js';var pdfDoc = null,pageNum = 1,pageRendering = false,pageNumPending = null,scale = 1,设置pdf文本显示区域的缩放级别canvas = document.getElementById('the-canvas'),ctx = canvas.getContext('2d');/*** 渲染对应的文档页码，并且调整canvas大小，渲染界面* @param num 页码.*/function renderPage(num) {pageRendering = true;// 通过promise来获取pdfDoc.getPage(num).then(function (page) {var viewport = page.getViewport(scale);canvas.height = viewport.height;canvas.width = viewport.width;//将PDF文件渲染进canvas中var renderContext = {canvasContext: ctx,viewport: viewport};var renderTask = page.render(renderContext);//等待渲染结束renderTask.promise.then(function () {pageRendering = false;if (pageNumPending !== null) {// New page rendering is pendingrenderPage(pageNumPending);pageNumPending = null;}});});// 更新页码document.getElementById('page_num').textContent = num;}/*** 如果有另一个页面pdf页正在渲染，那么先等这个pdf页渲染完再渲染。否则立即渲染传进来的页码。*/function queueRenderPage(num) {if (pageRendering) {pageNumPending = num;} else {renderPage(num);}}/*** 上一页*/function onPrevPage() {if (pageNum <= 1) {return;}pageNum--;queueRenderPage(pageNum);}/*** 下一页*/function onNextPage() {if (pageNum >= pdfDoc.numPages) {return;}pageNum++;queueRenderPage(pageNum);}/*** 异步的下载pdf文件*/PDFJS.getDocument(url).then(function (pdfDoc_) {pdfDoc = pdfDoc_;document.getElementById('page_count').textContent = pdfDoc.numPages;// 下载完以后初始化渲染第一页renderPage(pageNum);});function _touch() {var startx;//让startx在touch事件函数里是全局性变量。var endx;var el = document.getElementsByTagName("body")[0];function cons() {   //独立封装这个事件可以保证执行顺序，从而能够访问得到应该访问的数据。var l = Math.abs(startx - endx);var h = Math.abs(starty - endy);if (l > h) {// x事件if (startx > endx) {onNextPage();} else if (startx < endx) {onPrevPage();}} else {// y事件if (starty > endy) {onNextPage();} else if (starty < endy) {onPrevPage();}}}el.addEventListener('touchstart', function (e) {var touch = e.changedTouches;startx = touch[0].clientX;starty = touch[0].clientY;});el.addEventListener('touchend', function (e) {var touch = e.changedTouches;endx = touch[0].clientX;endy = touch[0].clientY;cons();  //startx endx 的数据收集应该放在touchend事件后执行，而不是放在touchstart事件里执行，这样才能访问到touchstart和touchend这2个事件产生的startx和endx数据。另外startx和endx在_touch事件函数里是全局性的，所以在此函数中都可以访问得到，所以只需要注意事件执行的先后顺序即可。});}_touch();
</script>
</html>

demo演示效果：

demo地址：

github: https://github.com/JerryYuanJ/demos/tree/master/01-pdf-online-viewer

转载的原csdn地址：http://download.csdn.net/download/qq_25324335/10192172

使用pdf.js实现pdf文件的在线预览（有码源）相关推荐

加载js文件，在线预览pdf文档
加载js文件,在线预览pdf文档效果演示环境要求 JS文件下载 Jsp页面导入js文件 jquery.media.js源码效果演示首先,先展示效果图环境要求 Tomcat8.5 [注意]:T ...
前端vue实现pdf文件的在线预览
3.前端vue实现pdf文件的在线预览我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...
java 上传文件及预览_SpringBoot上传下载文件及在线预览
SpringBoot上传下载文件及在线预览今天大概就说说如何使用SpringBoot进行上传和下载以及在线预览文件本篇主要介绍上传下载的功能,对于界面就简单一点,大致如下: 一.老规矩还是先看看小 ...
SpringBoot上传下载文件及在线预览
SpringBoot上传下载文件及在线预览今天大概就说说如何使用SpringBoot进行上传和下载以及在线预览文件本篇主要介绍上传下载的功能,对于界面就简单一点,大致如下: 一.老规矩还是先看看小 ...
前端ppt\word等等文件实现在线预览功能
前端ppt\word等等文件实现在线预览功能方法1:https://view.xdocin.com/view?src=你的文档地址 10天免费方法2:https://view.officeapps ...
js下载文件和在线预览文件
// 在线预览文件let file = url;let lastIndex=file.lastIndexOf(".");let suffix=file.substring(last ...
富文本生成word并在线预览（附源码）
记录富文本内容生成word并在线预览碰到的问题,以及最终的解决方案. 一.需求当前项目需要将页面富文本中的内容,生成word并在线预览. 二.解决方案1(未解决) 1. openoffice wor ...
vue2.0移动端使用vue-pdf插件实现PDF文件流在线预览
如果遇到电子签章不显示问题,滑到最下方 npm install --save vue-pdf@4.2.0 npm install pdfjs-dist@2.5.207 如果后台返回的文件流为图片 - ...
前端实现pdf文件的在线预览与下载
前言在项目中我们经常会出现各种各样的法律文件.免责说明等文件需要用户阅读,很多文件除了阅读外还要支持用户下载.为了快速开发,一些变动不大的文件,或者是项目中不想开发富文本的时候我们可以选择直接使用p ...

使用pdf.js实现pdf文件的在线预览（有码源）

使用pdf.js实现pdf文件的在线预览（有码源）相关推荐

最新文章

热门文章