PDFViewer, brought to you by PDF Generator API, is a powerful and easy-to-use JavaScript library that allows developers to embed PDF viewing functionality directly into their web applications. Designed with flexibility and user experience in mind, PDFViewer empowers your projects to handle PDF documents with precision and style.
Integrating with your web application is easy as copying the code below!
<div id="viewer"></div>
<script src="https://unpkg.com/pdf-generator-api-pdfviewer@latest/dist/PDFViewer.iife.js"></script>
<script>
const { PDFViewer } = PDFGeneratorApi;
const viewer = new PDFViewer({
container: document.getElementById("viewer")
});
viewer.loadUrl("https://pdfgeneratorapi-web-assets.s3.us-east-1.amazonaws.com/demo_document_for_pdfviewer.pdf");
</script>
Experience seamless PDF viewing with PDFViewer! Simply upload your document and enjoy a fast, smooth, and hassle-free way to read, navigate, and interact with your PDFs—all in your browser. Try it now by dragging and dropping your PDF to the viewer or using the upload icon on the toolbar.
PDFViewer is your solution for creating interactive, document-rich web applications. Whether you’re building an enterprise solution, an educational platform, or a document-sharing tool, PDFViewer ensures a seamless PDF experience that aligns with your vision.
Elevate your application today with PDFViewer and bring professional PDF handling capabilities to your users. Start building the future of document viewing now!
You can install PDFViewer via npm and yarn package managers or include the standalone build from the CDN. You can use vanilla JavaScript or TypeScript. All popular Javascript builders like Webpack, Rollup, Browserify, and Parcel can be used to include PDFViewer in your project.
npm install pdf-generator-api-pdfviewer
yarn add pdf-generator-api-pdfviewer
import { PDFViewer } from "pdf-generator-api-pdfviewer";
const viewer = new PDFViewer({
container: document.getElementById("viewer-container")
});
viewer.loadUrl("https://pdfgeneratorapi-web-assets.s3.us-east-1.amazonaws.com/demo_document_for_pdfviewer.pdf");
const { PDFViewer } = require("pdf-generator-api-pdfviewer");
const viewer = new PDFViewer({
container: document.getElementById("viewer-container")
});
viewer.loadUrl("https://pdfgeneratorapi-web-assets.s3.us-east-1.amazonaws.com/demo_document_for_pdfviewer.pdf");
<div id="viewer"></div>
<script src="https://unpkg.com/pdf-generator-api-pdfviewer@latest/dist/PDFViewer.iife.js"></script>
<script>
const { PDFViewer } = PDFGeneratorApi;
const viewer = new PDFViewer({
container: document.getElementById("viewer")
});
viewer.loadUrl("https://pdfgeneratorapi-web-assets.s3.us-east-1.amazonaws.com/demo_document_for_pdfviewer.pdf");
</script>
You can load PDF documents from URL or base64 encoded file.
const viewer = new PDFViewer({
container: document.getElementById("viewer-container")
})
viewer.loadUrl("https://pdfgeneratorapi-web-assets.s3.us-east-1.amazonaws.com/demo_document_for_pdfviewer.pdf");
const viewer = new PDFViewer({
container: document.getElementById("viewer-container"),
})
const base64encodedPdf =
"JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog" +
"IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv" +
"TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K" +
"Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg" +
"L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+" +
"PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u" +
"dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq" +
"Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU" +
"CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu" +
"ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g" +
"CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw" +
"MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v" +
"dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G";
viewer.loadBase64(base64encodedPdf);
viewer.loadUrl('[public URL to a PDF file]'); // load PDF from an URL
viewer.loadBase64('[base64 encoded PDF file]'); // load PDF from a base64 encoded string
viewer.setOptions({
theme: Theme.Light, // PDFViewer theme: (Theme.Light | Theme.Dark | Theme.PDFApi)
initialScale: Scale.PageFit, // Initial page scale: : (Scale.AutomaticZoom | Scale.ActualSize | Scale.PageFit | Scale.PageWidth | number)
toolbarFontSize: 16, // Toolbar font size: Ranged from 10 to 24 (number)
toolbarIconSize: 24, // Toolbar icon size: (16 | 24 | 32 | 48)
scaleDropdown: true, // Page scale dropdown: (boolean)
search: true, // Searching: (boolean)
print: true, // Printing: (boolean)
download: true, // Downloading: (boolean)
upload: true // Uploading: (boolean)
});
Effortlessly display PDF files in your web application without redirecting users to external viewers. Whether your PDFs are hosted online or encoded as base64 strings, PDFViewer ensures a smooth and intuitive experience for developers and end-users alike.
PDFViewer offers extensive customization options, allowing you to tailor the viewer’s interface to your application’s needs. Enable or disable features such as downloading, printing, and uploading documents to maintain control over user interactions and data security.
Provide your users with a clean and intuitive interface that matches the modern expectations of web applications. PDFViewer integrates seamlessly into your design, ensuring a cohesive look and feel.
Built for developers, PDFViewer is easy to install, integrate, and customize. Comprehensive documentation and examples make getting started a breeze, so you can focus on building exceptional applications rather than wrestling with complex setups.