24 October 2014

In general we are going to embed pdf in html. For this tutorial I am going to use PDF.js. It is a web platform for parsing and rendering PDF files. Canvas support is one of the main things that is needed by PDF.js.

Get the PDF library:

Get stable or beta release from http://mozilla.github.io/pdf.js/getting_started/#download. Upload the library to the site you are going to use it on. Basically this is HTML5 embed PDF reader / viewer.

Pure HTML version:

Source code viewer
  1. <iframe 
  2.   class="pdf" 
  3.   webkitallowfullscreen="" 
  4.   mozallowfullscreen="" 
  5.   allowfullscreen="" 
  6.   frameborder="no" 
  7.   width="100%" 
  8.   height="600px" 
  9.   src="http://example.com/pdf.js/web/viewer.html?file=http%3A%2F%2Fexample.com%2Fembed.pdf" 
  10.   data-src="http://example.com/embed.pdf">
  11.   http://example.com/embed.pdf
  12. </iframe>
Programming Language: HTML5

PHP version:

Source code viewer
  1. $pdf_url = 'http://example.com/embed.pdf';
  2. $width = '100%';
  3. $height = '600px';
  4. echo '<iframe 
  5.   class="pdf" 
  6.   webkitallowfullscreen="" 
  7.   mozallowfullscreen="" 
  8.   allowfullscreen="" 
  9.   frameborder="no" 
  10.   width="'.$width.'" 
  11.   height="'.$height.'" 
  12.   src="http://example.com/pdf.js/web/viewer.html?file='.urlencode($pdf_url).'" 
  13.   data-src="'.$pdf_url.'">
  14.   '.$pdf_url.'
  15. </iframe>';
Programming Language: PHP