第一步:引入pdf.js
<script src="./pdf/pdf.js"></script>
第二步:创建div展示PDF
<div id="container" style="display: none;"> <div class="lightbox"></div> <div id="pop" class="pop"> <canvas id="the-canvas"></canvas> </div>
<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>
第三部:加载PDF
var container = document.getElementById("container"); container.style.display = "block"; var url = '<%=basePath%>files/55.pdf'; PDFJS.cMapUrl = './cmaps/'; PDFJS.cMapPacked = true; PDFJS.workerSrc = './pdf/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); }); });
若需要展示电子签章,在pdf.worker.js中注释
// if (this.data.fieldType === 'Sig') { // warn('unimplemented annotation type: Widget signature'); // return false; // }