Skip to main content
Version: Version 5

View a PDF

Extensive development effort required

This guide outlines a functionality that requires extensive development effort. Use the readily available features of the PDF Viewer SDK instead of implementing a viewer from scratch. Only use this guide if you want to implement your PDF viewer and customize it as much as possible. To test and implement the primary functionality of this SDK, review Getting started with the PDF Viewer SDK.

Learn how to create a document view with the PDF Web SDK.

Steps to view a PDF file:

  1. Initialize the SDK
  2. Define the view element
  3. Attach the view to page
  4. Create controller
  5. Open PDF
  6. Full example
Before you begin

Learn how to get started and make static assets available.

Initialize the SDK​

Before instantiating objects and working with PDF Web SDK API, it needs to be initialized.

import { pdfToolsWebSdk, Pdf, UI } from '@pdftools/pdf-web-sdk';

async function initialize() {
  await pdfToolsWebSdk.initialize({
    path: './pdftools-web-sdk/',
  });
}

initialize();

Define the view element​

To view a document you have to create a page containing a container element as the root element for the viewer.

<div
  id="pdftools-web-viewer-container"
  style="width:100vw; height: 100vh;"
></div>

Attach the view to the page​

This root element then can be used to create a UI.DocumentView.

const container = document.querySelector('#pdftools-web-viewer-container');
const documentView = new UI.DocumentView(container);

Create controller​

A Pdf.Controller needs to be created to open the desired document. This controller is responsible for processing document events such as rendering pages.

const controller = new Pdf.Controller();

Open PDF​

Finally the document can be loaded and passed to the initialization of the UI.DocumentView for viewing it.

const pdfDocument = await controller.openDocument({
  uri: '/pdf/WebViewer_Demo.pdf',
});
documentView.initialize(pdfDocument);

Full example​

This full sample demonstrates how to create a document view using the PDF Web SDK.

** index.html **

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PDF Viewer SDK</title>
  </head>
  <body>
    <div
      id="pdftools-web-viewer-container"
      style="width:100vw; height: 100vh;"
    ></div>
  </body>
</html>

** index.ts **

import { pdfToolsWebSdk, Pdf, UI } from '@pdftools/pdf-web-sdk';

async function initialize() {
  await pdfToolsWebSdk.initialize({
    path: './pdftools-web-sdk/',
  });

  const container = document.querySelector('#pdftools-web-viewer-container');
  const documentView = new UI.DocumentView(container);

  const controller = new Pdf.Controller();
  const pdfDocument = await controller.openDocument({
    uri: '/pdf/WebViewer_Demo.pdf',
  });

  documentView.initialize(pdfDocument);
}

initialize();