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>项目架构：
转自：https://www.cnblogs.com/xiangliuyunyang/p/5956453.html
pdf.js 使用实例
原文地址：https://www.cnblogs.com/w821759016/p/10243546.html