pdf.js 使用实例 -数据天堂

pdf.js 使用实例

# 前端 2024-04-03 15:37 0 26 来源：数据天堂

pdf.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件

pdf.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，，一个负责API解析，一个负责核心解析

下载地址：http://cnblogs.com/files/xiangliuyunyang/build.zip

两个主要demo

1.点击连接读取第一页的pdf文档：http://www.51purse.com/pdf/web/demo1.html（此处没有自己上传）

2.点击连接，选择需要打开的文件，进行pdf预览：http://www.51purse.com/pdf/web/demo2.html（此处没有自己上传）

参考代码：

demo1:

<html><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .lightbox{ position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; z-index: 7; opacity: 0.3; display: block; background-color: rgb(0, 0, 0); } .pop{ position: absolute; left: 50%; width: 894px; margin-left: -447px; z-index: 9; } </style> <script src="Scripts/pdf.js" type="text/javascript"></script> <script type="text/javascript"> function showPdf() { var container = document.getElementById("container"); container.style.display = "block"; var url = ‘Scripts/jQuery经典入门教程(绝对详细).pdf‘; PDFJS.workerSrc = ‘Scripts/pdf.worker.js‘; PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) { pdf.getPage(1).then(function getPageHelloWorld(page) { var scale = 1; var viewport = page.getViewport(scale); var canvas = document.getElementById(‘the-canvas‘); var context = canvas.getContext(‘2d‘); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); }); } </script></head><body> <h1><a href="javascript:void(0)" target="_blank" onclick="showPdf()">显示pdf文档</a></h1> <div id="container" style="display: none;"> <div class="lightbox"></div> <div id="pop" class="pop"> <canvas id="the-canvas"></canvas> </div> </div></body></html>

demo2:

<html><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .lightbox{ position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; z-index: 7; opacity: 0.3; display: block; background-color: rgb(0, 0, 0); display: none; } .pop,iframe{ position: absolute; left: 50%; top:0; width: 893px; height: 100%; margin-left: -446.5px; z-index: 9; } </style> <script src="Scripts/pdf.js" type="text/javascript"></script> <script type="text/javascript"> function showPdf(isShow) { var state = ""; if (isShow) { state = "block"; } else { state = "none"; } var pop = document.getElementById("pop"); pop.style.display = state; var lightbox = document.getElementById("lightbox"); lightbox.style.display = state; } function close() { showPdf(false); } </script></head><body> <ul> <li><a href="Scripts/jQuery经典入门教程(绝对详细).pdf" target="pdfContainer" onclick="showPdf(true)">0001_pdf</a></li> </ul> <div class="lightbox" id="lightbox"></div> <div id="pop" class="pop" style="display: none;"> <a href="javascript:close()" style=" position: absolute; right: -90px; display: inline-block; width: 80px; height: 30px; " id="close">关闭</a> <iframe src="" frameborder="0" id="pdfContainer" name="pdfContainer"></iframe> </div></body></html>