Skip to main content
Version: Version 5 beta

View a PDF

info

In this documentation, you can learn how to implement specific features of the PDF Web SDK. If you prefer to test a demo or would like to explore the basic functionalities 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();