Using jQuery-PDFDOC¶
NOTE: The plugin is in VERY early development and so does not have very many features!¶
Current features:- View PDFs in the browser without extra software. PDFs are rendered in JavaScript!
- Skip to any page immediately, or by next/prev.
- Zoom in/out
- Download the source PDF directly!
- Loading status progress indicator!
The latest version is 0.7¶
Live Demo¶
Download here¶
API Reference¶
Requirements¶
- PDF.js - http://github.com/mozilla/pdf.js/
- jQuery - http://docs.jquery.com/Downloading_jQuery
- jQuery-PDFDOC - http://dev.funkynerd.com/projects/jquery-pdfdoc/files
Installation¶
- Drop the jquery.min.js file from jQuery zip file into your project's js directory.
- Drop the pdf.js file from the PDF.js project zip file you downloaded into your project's js directory.
- Unzip the contents of jquery-pdfdoc-0.5.zip into the same directory.
Example¶
This is just a simple example on how to get up and running and display your first PDF document. This will load a PDF file in the files sub-directory relative to the location of the script.
<html>
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/pdf.js"></script>
<script type="text/javascript" src="js/jquery-pdfdoc.js"></script>
<link href="js/jquery-pdfdoc.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="width: 800px; height: 600px;">
<div id="mypdfdoc"></div>
</div>
<script>
$(document).ready(function(){
$('#mypdfdoc').PDFDoc( { source : 'files/yourawesomedoc.pdf' } );
});
</script>
</body>
</html>
NOTE: While the source can be any valid URL, such as "http://www.example.com/content/file.pdf", please remember that Javascript does not allow cross domain requests, so the PDF you are trying to load MUST exist on the same domain as the page that uses the jQuery-PDFDOC plugin.¶
If any of that is unclear, please feel free to ask a question in the forums or contact me at jazz@funkynerd.com.