PDFJS

PDFJS print

by vikikamath

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.js"></script>
<script id='template' type="text/ractive">
  <div id="tools" class='no-print'>
    <ul>
      <li>
        <button id="print" on-click="beforePrint">Print</button>
      </li>
      <li>
        <button id="download">Download</button>
      </li>
    </ul>
  </div>
  <div id="wrapper" class='no-print'>
    {{#pdfPages:i}}
    <canvas id='pdfpage-{{i}}' class='pdfPage'></canvas>
    {{/pdfPages}}
  </div>
  <div id='hello'>
    {{#printPages}}
    <img class='printPage' src='{{.}}' /> {{/printPages}}
  </div>
</script>
<div id='container'>

</div>

CSS

* {
  margin-top: 0;
}

body {
  background: gray
}

#tools {
  position: fixed;
  background: #ccc;
  width: 100%;
  padding: 0.1em;
}

ul {
  list-style: none;
  margin-left: 40%;
}

ul > li {
  display: inline;
}

@media print {
  .no-print,
  .no-print * {
    display: none !important;
  }
}

JavaScript

requirejs.config({
  paths: {
    'pdfjs-dist/build/pdf': 'https://rawgit.com/mozilla/pdfjs-dist/master/build/pdf',
    'pdfjs-dist/build/pdf.worker': 'https://rawgit.com/mozilla/pdfjs-dist/master/build/pdf.worker',
    'pdfjs-dist/web/pdf.components': 'https://rawgit.com/mozilla/pdfjs-dist/master/web/pdf_viewer',
    'ractive': 'https://cdnjs.cloudflare.com/ajax/libs/ractive/0.7.3/ractive'
  }
});

require(['ractive', 'pdfjs-dist/build/pdf', 'pdfjs-dist/build/pdf.worker', 'pdfjs-dist/web/pdf.components'], function(Ractive, pdfjs) {

  ractive = new Ractive({
    el: '#container',
    template: '#template',
    data: {
      pdfPages: [],
      printPages: [],
      printStyle: 'display: none;',
      wrapperStyle: 'display: block'
    }
  });

  ractive.on('beforePrint', function() {
    ractive.findAll('.pdfPage').forEach(function(canvasRef) {
      ractive.push('printPages', canvasRef.toDataURL('image/png'));
    })

    window.print();
    ractive.fire('afterPrint');
  })

  ractive.on('afterPrint', function() {
  	var printPages = ractive.get('printPages');
    while (printPages.length) {
      printPages.shift();
    }
  })


  var pdfjs = pdfjs;

  // Fetch the PDF document from the URL using promises.
  pdfjs.getDocument('https://rawgit.com/mozilla/pdf.js/master/test/pdfs/tracemonkey.pdf')
    .then(function(pdf) {
      for (var i = 0; i < pdf.numPages; i++) {
        pdf.getPage(i).then(function(page) {
          ractive.push('pdfPages', page);
          return page.pageNumber - 1;
        }).then(function(pageNumber) {
          var canvas = ractive.nodes['pdfpage-' + pageNumber];
          var context = canvas.getContext('2d');
          var viewport = ractive.get('pdfPages')[pageNumber].getViewport(1.5);
          canvas.height = viewport.height;
          canvas.width = viewport.width;
          var renderContext = {
            canvasContext: context,
            viewport: viewport
          };
         ...