Embed A Powerful PDF Viewer Using The jQuery.pdfviewer Plugin

File Size: 96.8 KB
Views Total: 2731
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Embed A Powerful PDF Viewer Using The jQuery.pdfviewer Plugin

A simple, lightweight jQuery plugin that lets you embed a fully functional PDF viewer in your document.

Built on top of Mozilla's robust pdf.js engine, it comes with a range of user-friendly controls for page navigation, zooming, and printing, as well as downloading the PDF.

How to use it:

1. Load the necessary jQuery and pdf.js libraries from a CDN.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/pdf.min.js"></script>

2. Download and load the jQuery.pdfviewer plugin's files.

<link rel="stylesheet" href="css/pdfviewer.jquery.css" />
<script src="js/pdfviewer.jquery.js"></script>

3. Create an empty container to hold your PDF viewer.

<div id="pdfviewer"></div>

4. Initialize the plugin and specify the path to the PDF file.

$('#pdfviewer').pdfViewer('file.pdf');

5. Set the size of the PDF viewer.

$('#pdfviewer').pdfViewer('file.pdf',{
  width: 900,
  height: 600,
});

6. The filename option allows saving the PDF with a custom name on download. The example uses date values to create a unique name.

$('#pdfviewer').pdfViewer('file.pdf',{
  filename: "DOCUMENT_" + date.getDay() + '_' + date.getMonth() + '_' + date.getFullYear(),
});

7. The isBase64 flag indicates if the document Url contains a base64 encoded PDF data. Set to true for base64 files.

$('#pdfviewer').pdfViewer('file.pdf',{
  isBase64: true,
});

This awesome jQuery plugin is developed by algotrader2023. For more Advanced Usages, please check the demo page or visit the official website.