Samples

Demonstrates how to use accessibility feature of WebViewer to read PDF text out loud.

This sample illustrates how to embed various raster image formats (e.g. TIFF, JPEG, JPEG2000, JBIG2, GIF, PNG, BMP, etc.) in a PDF document.

Github repo that demonstrates how to integrate WebViewer into an Angular project.

In this example, you are able to pass any URL and be able to save a copy of that website to annotate.

Shows how to add a text annotation to an existing page and how to create link annotations between several pages.

The sample code illustrates how to read and edit existing outline items and create new bookmarks using the high-level API.

Shows how to get each color's information. You can also show/hide specific colors.

Edit the content of a PDF document directly.

The sample demonstrates replacement of objects such as images, text and strings within a document.

Shows how to create and add custom annotations by extending the existing annotation classes.

Shows how to customize the UI using WebViewer APIs. Includes modifying header, enabling/disabling features and hiding/showing individual elements.

Shows how to change color and opacity of form fields.

Shows how to render three synchronized panels where the middle panel shows pixel differences between the two documents.

Demonstrates how to digitally sign a PDF and also how to certify a PDF doc.

Shows how to implement a dropzone to be able to drag and drop pages from multiple viewer instances.

Github repo that demonstrates how to integrate WebViewer into an Electron project.

Illustrates how to use PDFNet page writing API, how to embed fonts and images and how to copy graphical elements from one page to another.

The sample code shows how to edit the page display list and how to modify graphics state attributes on existing Elements. In particular the sample program strips all images from the page and changes text color to blue.

Illustrates how to traverse page display list using ElementReader.

Demonstrates how to encrypt and decrypt files by adding or removing passwords.

Demonstrates how to extract canvas of each page. The sample uses turn.js to render them.

This sample demonstrates how to add form fields to a PDF. Fields are first added as annotations and then converted to interactive form fields. Add signatures, text fields, checkboxes.

Illustrates how to create and edit interactive forms (check boxes and text boxes).

Shows how to switch language.

Shows how to get each layer's information. You can also show/hide specific layers.

This sample illustrates how to traverse the structure and content of a tagged PDF document.

Shows how to create annotations that measure distance, perimeter and area.

Github repo that demonstrates how to integrate WebViewer into NuxtJS project.

Bind templates to content in .docx and .xlsx files.

This sample illustrates how to convert office files to PDF.

Demonstrates how to use ServiceWorker to use WebViewer offline.

The sample illustrates how to reduce PDF file size using 'pdftron.PDF.Optimizer'. It also shows how to simplify and optimize PDF documents for viewing on mobile devices and on the Web using 'pdftron.PDF.Flattener'.

This sample demonstrates PDFA verification and conversion.

This sample illustrates how to use the built-in rasterizer in order to render PDF images on the fly and how to save resulting images in PNG and JPEG format.

This sample demonstrates how to create PDF layers (also known as Optional Content Groups - OCGs). The sample also shows how to extract and render PDF layers.

The sample illustrates how to copy pages from one document to another, how to delete, and re-arrange pages and how to use ImportPages() method for very efficient copy and merge operations.

The sample illustrates how to translate a PDF image by extracting and manipulating the image's media box.

The sample illustrates how to create Redaction objects and use PDFNetJS's redact function to remove and overlay PDF document content.

Shows how to rotate/crop/add/delete page, change page order, insert blank pages and merge multiple documents.

Shows how to preload WebViewer and documents to improve user experience.

Github repo that demonstrates how to integrate WebViewer into a React project.

This sample demonstrates Reader Mode in WebViewer.

An example setup with Firebase backend. For more details, refer to realtime collaboration guide .

An example setup with Node.js backend.

Shows how to automatically detect and redact people faces from documents.

Shows how to redact and permanently remove text, images or graphics from a document.

The sample illustrates how to extract an SDF document from a PDF document and change some of its values.

Github repo that demonstrates how to integrate WebViewer into Salesforce as a Lightning Web Component.

Demonstrates building a signing application where users can request signatures on the documents by placing fields, sign documents, review signed documents.

The sample code illustrates how to stamp text and images onto various pages in a PDF document.

Github repo that demonstrates how to integrate WebViewer into Svelte project.

Shows how to compare text in different documents.

Shows how to extract text positions from a document. The sample highlights the positions with different colors.

The sample demonstrates how to extract information from text boxes such as their position, font, size, color and of course the text itself.

The sample demonstrates how to search using strings and regular expressions in a PDF document and how to set search mode and parameters.

Shows how to use thumbnail controls for page manipulation of documents. Note that this is only enabled for client side PDF and Office documents.

Describes types of permissions and switching between users. You can also show/hide annotations of specific users.

Allows the functionality of annotating video frames.

Compares viewing an unoptimized PDF with the same viewer optimized PDF side by side

This sample demonstrates how to customize document save/download. In the example annotations are flattened before saving.

This sample illustrates how PDFNetJS can be used to validate digital signatures in a document.

This sample demonstrates how to use PDFNetJS to select elements in a PDF document. Click on an element in the PDF and it will show the element's bounding box and an outline if it is a PDF path.

This sample illustrates how PDFNetJS can be used to perform complex editing on PDF documents as they are displayed in the WebViewer. Open a PDF of your choice and press the refresh button at the top right to change all text to blue and all images to red.

This sample illustrates how PDFNetJS can be used to compare two PDF documents and show their difference in WebViewer.

This sample illustrates how PDFNetJS can be used to compare the text content of two PDF documents and show their difference in WebViewer.

This sample illustrates how PDFNetJS can be used to preprocess a document before displaying it with WebViewer.

This sample illustrates how to use the snap API for calculating the nearest snap point.

Shows how to call WebViewer constructor to instantiate and load document. You can load local/remote files of your choice.

Shows how to load XOD files, which are generated from a custom server.

Shows how to call WebViewer constructor to instantiate and load document using WebViewer with WebViewer Server. You can upload local files or load files that are publicly accessible.

Github repo that demonstrates how to integrate WebViewer into Vue project.

The sample is using pdftron.PDF.Convert.ToXod() to convert/stream PDF, XPS, MS Office, RTF, HTML and other document formats to WebViewer.

PDFNet includes full support for FDF (Forms Data Format) and the capability to merge/extract forms data (FDF) with/from PDF. The sample illustrates basic XFDF merge functionality available in PDFNet.

This sample illustrates how PDFNetJS can be used to power deck.js slideshows in the same way WebViewer does using PDFNet rasterizing functions.