pdf.js的使用

第一步：引入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;
// }