Getting started with the PDF Viewer SDK

Get up and running with the PDF Viewer SDK.

This guide walks you through the steps to integrate the the ready-to-use viewer into your application.

tip

You can also follow this guide if you are starting with a project from scratch. For this, all you need is a blank folder.

Prerequisites

To install the package, use a package manager such as npm or yarn.

Get started with a sample project

Learn how to run the PDF Viewer SDK sample:

Compile and run the sample

1. Download or clone the sample repository.

2. From the root of the repository, navigate to a sample at:

   examples/vanilla-typescript/view-pdf

3. Install dependencies:

   npm install

4. Build the project:

   npm run build

5. Run the server:

   npm run dev

6. Open http://localhost:4567/ in your browser.

samples

Run other samples in the same way. Review the /examples directory for more samples in the downloaded or cloned sample repository.

Integrate the SDK into your application

Integrate and initialize the PDF Viewer SDK into your application by following the instructions in the next sections.

Add the SDK to your project

In your project folder run the following command to install the PDF Web Viewer:

npm install @pdftools/pdf-web-viewer

Static assets

PDF Web Viewer comes with static assets and resource files (WebAssembly and JavaScript files) stored in node_modules/@pdftools/pdf-web-sdk/dist/wasm sub-directory. To allow proper initialization of the PDF Web Viewer inside of your application, make mentioned files publicly available to the application from a base path (for example: /pdftools-viewer-sdk). You can do this automatically or manually depending on your system, see the following sections for more details:

• Copy static assets automatically
• Copy static assets manually

Copy static assets automatically

Automate the process for development and production using a bundler, to make sure that always the proper assets are used on every build. While copying files manually for prototyping is a viable way, automating this process is recommended.

React

In React, tools like Webpack or Rollup are typically used for bundling your application.

Webpack

Copying of the assets and resource files can be automated using copy-webpack-plugin. This automatically copies the files from node_modules/@pdftools/pdf-web-viewer/pdftools-web-viewer to /pdftools-web-viewer on every build.

An example of webpack.config.js:

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // Other Webpack configuration options...
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'node_modules/@pdftools/pdf-web-viewer/pdftools-web-viewer',
          to: 'pdftools-web-viewer',
        },
      ],
    }),
  ],
};

For more details see official copy-webpack-plugin documentation.

Rollup

Copying of the assets and resource files can be automated using rollup-plugin-copy. This automatically copies the files from node_modules/@pdftools/pdf-web-viewer/pdftools-web-viewer to /pdftools-web-viewer on every build.

An example of rollup.config.js:

import copy from 'rollup-plugin-copy';

export default {
  // Other Rollup configuration options...
  plugins: [
    copy({
      targets: [
        {
          src: 'node_modules/@pdftools/pdf-web-viewer/pdftools-web-viewer',
          dest: 'pdftools-web-viewer',
        },
      ],
    }),
  ],
};

For more details see official rollup-plugin-copy documentation.

Angular

Add the path to the static assets in the assets array of your angular.json file.

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "node_modules/@pdftools/pdf-web-viewer/pdftools-web-viewer",
    "output": "/pdftools-web-viewer/"
  }
]

For more details, review official Angular documentation.

Vue

In Vue, Webpack is typically used for bundling your application.

Webpack

Copying of the assets and resource files can be automated using copy-webpack-plugin. This automatically copies the files from node_modules/@pdftools/pdf-web-viewer/pdftools-web-viewer to /pdftools-web-viewer on every build.

An example of webpack.config.js:

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // Other Webpack configuration options...
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'node_modules/@pdftools/pdf-web-viewer/pdftools-web-viewer',
          to: 'pdftools-web-viewer',
        },
      ],
    }),
  ],
};

For more details see official copy-webpack-plugin documentation.

For details also see official Vue CLI Webpack configuration documentation.

Vanilla TypeScript

Tools like Webpack or Rollup can be used for bundling your application.

Webpack

Copying of the assets and resource files can be automated using copy-webpack-plugin. This automatically copies the files from node_modules/@pdftools/pdf-web-viewer/pdftools-web-viewer to /pdftools-web-viewer on every build.

An example of webpack.config.js:

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // Other Webpack configuration options...
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'node_modules/@pdftools/pdf-web-viewer/pdftools-web-viewer',
          to: 'pdftools-web-viewer',
        },
      ],
    }),
  ],
};

For more details see official copy-webpack-plugin documentation.

Rollup

Copying of the assets and resource files can be automated using rollup-plugin-copy. This automatically copies the files from node_modules/@pdftools/pdf-web-viewer/pdftools-web-viewer to /pdftools-web-viewer on every build.

An example of rollup.config.js:

import copy from 'rollup-plugin-copy';

export default {
  // Other Rollup configuration options...
  plugins: [
    copy({
      targets: [
        {
          src: 'node_modules/@pdftools/pdf-web-viewer/pdftools-web-viewer',
          dest: 'pdftools-web-viewer',
        },
      ],
    }),
  ],
};

For more details see official rollup-plugin-copy documentation.

Copy files differently in PDF Web SDK

In case you are using just the PDF Web SDK without the PDF Web Viewer in your project:

1. Copy static assets from node_modules/@pdftools/pdf-web-sdk/pdftools-web-sdk.

Copy static assets manually

Copy the static assets manually if you have specific requirements within your project that can be difficult to solve with automatic copy by issuing the following steps:

1. Copy the files to a publicly available path.
2. If your project is served through a server, ensure that the server is configured to serve WASM files with the appropriate MIME type (application/wasm).

Initialize the viewer

When you are finished with the resources setup, initialize the PDF Viewer SDK with the following steps:

1. Create a minimalistic HTML page (for example index.html) with a <div> element, including a Viewer container. Review the example below:

   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Document</title>
     </head>
     <body style="margin: 0; min-height: 100vh">
       <!-- this element will be used to attach the viewer to it -->
       <div id="viewer-container" style="width: 100vw; height: 100vh"></div>
     </body>
   </html>

2. Create a short TypeScript file that performs the initiliazation of the PDF Viewer SDK:

   import { PdfToolsViewer } from '../../components/pdftools-viewer';
   
   // create the viewer element
   const el = PdfToolsViewer.initialize();
   // attach it to the reserved element
   const container = document.getElementById('viewer-container');
   container.append(el);

note

By default the PDF Web Viewer looks for static assets in './pdftools-web-viewer/'. If you configure your project's static assets in a different location, provide the location as an argument:

const el = PdfToolsViewer.init({
    path: './pdftools-web-viewer/',
  });

Manage license key

The PDF Viewer SDK displays watermarked pages by default. Use a license key to remove the watermark for free. To obtain the license key:

1. Contact sales through the contact form to obtain the Free View-only license.

When you obtain the license key, include it in the initialize method to remove the watermark.

1. Find the PdfToolsViewer.init in the index.ts or index.js, and include the license key as follows:

   const el = await PdfToolsViewer.init({licenseKey: "<VIEWWEB,V5,XXXXXXXXXXXXXXXXXXXX>"});

Open a PDF document

With the ready-to-use viewer, end users can open files using a built-in file-open dialog. Optionally the file can be opened programmatically from different sources:

From URL

// open a document from a URL
PdfToolsViewerApi.document.openFromUrl('../pdf/WebViewer_Demo.pdf');

From file

// load the document content from an arbitrary source
const res = await fetch('http://localhost:3300/pdf/WebViewer_Demo.pdf');
const arrayBuffer = await res.arrayBuffer();

// convert the content to BLOB
const base64 = btoa(
  new Uint8Array(arrayBuffer).reduce(
    (data, byte) => data + String.fromCharCode(byte),
    ''
  )
);
const bufferData = `data:application/octet-stream;base64,${base64}`;
const blobData = await fetch(bufferData).then((res) => res.blob());

// create a file from the BLOB
const file = new File([blobData], 'WebViewer_Demo.pdf', {
   type: 'text/plain',
});

// open the file
PdfToolsViewerApi.document.openFromFile(file);

From memory

// load the document content from an arbitrary source
const res = await fetch('http://localhost:3300/pdf/WebViewer_Demo.pdf');
const arrayBuffer = await res.arrayBuffer();

// convert the content to an in memory array
const uint8array = new Uint8Array(arrayBuffer);

// open the in memory arry
PdfToolsViewerApi.document.openFromMemory(uint8array);

Implement your use case

• Find instructions how to implement specific use cases in the guides section.
• Find more technical information about the PDF Viewer SDK in the API references.

PDF Web SDK

The PDF Viewer SDK lets you customize some functionalities. If you have specific requirements, you can implement your own PDF viewer using the PDF Web SDK. Implementing the PDF Web SDK allows for greater customization but requires sifnificant development effort than the full PDF Viewer SDK. For more details, review the following sections and pages:

• PDF Web SDK
• Advanced functionality