Easy & High Performance PDF Embedding Library – PDF-Viewer

Preview:

Description:

A tiny PDF viewer written in JavaScript that provides developers with an easy way to embed any external PDF into web pages via asynchronous loading.

In addition, this PDF viewer allows visitors to navigate through the document with next and previous buttons, zoom in and out for better reading. It can be useful for educational sites, manuals, publications, or any project where document accessibility is key.

How to use it:

1. Download the PDF-Viewer library and include its script along with the pdf.js library in your HTML file.

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

2. Add a <div> element to your HTML where you want the PDF to appear.

<div id="pdf-container"></div>

3. Call the PDFEmbedJS.loadPDF function and pass in the container ID and the path to your PDF file.

PDFEmbedJS.loadPDF('pdf-container', './Sample.pdf');

4. Add custom controls for a more interactive experience. Create a container element for these controls and include buttons for previous, next, zoom in, and zoom out. Then, use JavaScript event listeners to trigger the corresponding PDF-Viewer functions

<div id="pdf-controls">
  <button id="prev">Previous</button>
  <button id="next">Next</button>
  <button id="zoomIn">Zoom In</button>
  <button id="zoomOut">Zoom Out</button>
</div>

document.getElementById('next').addEventListener('click', () => PDFEmbedJS.nextPage());
document.getElementById('prev').addEventListener('click', () => PDFEmbedJS.prevPage());
document.getElementById('zoomIn').addEventListener('click', () => PDFEmbedJS.zoomIn());
document.getElementById('zoomOut').addEventListener('click', () => PDFEmbedJS.zoomOut());