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">
  	<ul>
  		<li><button id="print" on-click="beforePrint">Print</button></li>
    	<li><button id="download">Download</button></li>
    </ul>
  </div>
  <div id="wrapper">
    {{#pdfPages:i}}
    	<canvas id='pdfpage-{{i}}' class='pdfPage'></canvas>
    {{/pdfPages}}
  </div>
  <iframe id="frame" style="display:none">
  	{{#printPages}}
    	<img src="{{.}}"/>
    {{/printPages}}
  </iframe>
</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;
}

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: []
    }
  });
  
  ractive.on('beforePrint', function(){
  	ractive.findAll('.pdfPage').forEach(function(canvasRef) {
    	ractive.push('printPages', canvasRef.toDataURL());
    })
    
    var _iFrame = ractive.nodes['frame'];
    
    _iFrame.style.display = 'block';
    _iFrame.contentWindow.focus();
    _iFrame.contentWindow.print();
    
    ractive.fire('afterPrint');
  })
  
  ractive.on('afterPrint', function() {
  	var _iFrame = ractive.nodes['frame'];
  	_iFrame.style.display = 'block';
  	ractive.get('printPages').forEach(function(_,_,arr) {
    	arr.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:...