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. class="pdf"
  2. webkitallowfullscreen=""
  3. mozallowfullscreen=""
  4. allowfullscreen=""
  5. frameborder="no"
  6. width="100%"
  7. height="600px"
  8. src="http://example.com/pdf.js/web/viewer.html?file=http%3A%2F%2Fexample.com%2Fembed.pdf"
  9. data-src="http://example.com/embed.pdf">
  10. http://example.com/embed.pdf
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