PDF.JS PDF文件预览插件

前言

本篇文章主要介绍一款好用的pdf预览插件pdf.js，使用方式简单只要参考官网实例即可。

PDF.js使用教程

下载pdf.js

PDF.js下载链接

引入pdf-js

body

上一页 下一页 Page: /

** script **

$(function() { // pdf url, 获取pdf文件的链接，对应的url可以返回文件流 var url = $(“#fileUrl”).val(); console.log(url); // 加载核心库 pdfjsLib.GlobalWorkerOptions.workerSrc = ‘/ajax/libs/pdfjs-2.2.228-dist/build/pdf.worker.js’; var pdfDoc = null, pageNum = 1, pageRendering = false, pageNumPending = null, scale = 1.5, canvas = document.getElementById(“the-canvas”), ctx = canvas.getContext(‘2d’); /** * 获取页面信息， 调整canvas 大小， 并且渲染页面 */ function renderPage(num) { pageRendering = true; // 使用promise刷新页面 pdfDoc.getPage(num).then(function (page) { var viewport = page.getViewport({scale: 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) { // 等待新的页面呈现 renderPage(pageNumPending); pageNumPending = null; } }); }); // 更新当前页面页码 document.getElementById(‘page_num’).textContent = num; } // 如果另一个页面还在渲染，则等待渲染结束。否则立即执行渲染。 function queueRenderPage(num) { if (pageRendering) { pageNumPending = num; } else { renderPage(num); } } // 显示上一页 function onPrevPage() { if (pageNum = pdfDoc.numPages) { return; } pageNum ++; queueRenderPage(pageNum); } document.getElementById(‘next’).addEventListener(‘click’, onNextPage); // 异步加载pdf pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) { pdfDoc = pdfDoc_; document.getElementById(‘page_count’).textContent = pdfDoc.numPages; // 初始化第一页渲染 renderPage(pageNum); }) })参考链接

PDF.js下载链接