Skip to main content
Version: Version 4

Technical notes

Learn how to configure range requests, find and configure keyboard shortcuts, find out about custom translations, keyboard shortcuts, and learn how to add custom buttons.

Range requests​

tip

Using range requests can considerably shorten initial load times for large PDFs.

When opening a PDF from a URL using the openFile method, the PDF Viewer SDK can use HTTP range requests to load only those parts of the PDF needed for the current display.

Each range request that PDF Viewer SDK makes has an approximate size 130 kB.

Ensure that the server accesses the PDF in a random-access way. Otherwise, each range request can force the server to reload the entire file.

Viewing-only edition​

The PDF Viewer SDK in a viewing-only edition has the following limitations:

  • Saving the PDF results in an error.
  • Creating annotations results in an error.

Because of these limitations, it is recommended that you disable these functionalities by following these steps:

  • In the viewer.permissions set allowSaveFile to false. Review allowSaveFile in the viewer.permissions reference documentation.
  • In the WebViewerOptions remove all entries from the modules.

The user interface allows to move, delete, and edit annotations. Saving the document is, however, not possible.

General limitations​

Due to the restrictions of the web environment, the PDF Viewer SDK has specific limitations described in the following sections:

Color management​

The PDF Viewer SDK uses an RGB color space for rendering. There can be some noticeable differences when printing a document that uses CMYK color spaces. As a consequence, the colors of non RGB content can differ slightly from the original when printing.

System fonts​

A font referenced in a PDF file can be either embedded or it is assumed to be present on the host system. Due to browser protection mechanisms, downloaded JavaScript such as the PDF Viewer SDK is not allowed to directly access system fonts. The PDF Viewer SDK analyzes the referenced fonts and replaces them with one of the standard fonts packaged with the PDF Viewer SDK. Consequently, due to this replacement glyph shapes can be altered or not rendered at all. For example: The CJK characters, Cyrillic and some other alphabets.

Texts that use non embedded fonts which use special glyphs can be rendered distorted or not at all.

To avoid described issue

Convert PDF files to PDF/A format before viewing. PDF/A embeds all fonts to the file.

Custom translations​

Parametrize the PDF Viewer SDK in the predefined languages English, German, French, and Italian.

Furthermore, you can define a custom translation. Translations are stored in files of the form translations.[language].json that have to reside in the same directory as the WebAssembly (for example, in window.PDFTOOLS_FOURHEIGHTS_PDFVIEWING_BASEURL). Set the language used in language of the viewer.general. For more information, see viewer.general reference documentation.

If a key in the translations.[language].json is missing, PDF Viewer SDK throws an error. You can remove the translation files that are not used.

Keyboard shortcuts​

The PDF Viewer SDK provides the possibility to customize keyboard shortcuts. In some cases, a shortcut is only available when you enable corresponding option. For example, shortcuts.print is only effective when viewer.permissions.allowPrinting is set to true.

To specify your keyboard shortcuts, use the following structure:

KeyboardShortcutBinding {
  key: string
  altKey?: boolean
  ctrlKey?: boolean
  shiftKey?: boolean
}

Note that the ? signifies an optional parameter.

Review reference documentation

For more information about specifiable shortcuts, review the shortcuts interface reference documentation.

Example configurations of shortcuts​

Example configurations of WebViewerOptions.

Use default shortcut configuration:

"viewer": {
}

Disable all shortcuts:

"viewer": {
  "shortcuts": null
}

Disable specific shortcuts:

"viewer": {
  "shortcuts":{
    "print": null,
    "rotateView": null
  }
}

Change key binding:

"viewer": {
  "shortcuts":{
    "zoomIn": { "key": "+" },
    "zoomOut": { "key": "-" },
    "nextPage": { "key": "PageDown" },
    "previousPage": { "key": "PageUp" },
    "save": {
      "key": "s",
      "altKey": false,
      "ctrlKey": true,
      "shiftKey": false,
    }
  }
}

Custom buttons​

You can define custom buttons in the Document bar, the Information bar, and in the Annotation bar.

To specify your custom buttons, use the following structure:

CustomButton {
  icon: string
  text: string
  onClick: () => void
}

Example configurations of custom buttons​

Example configurations of WebViewerOptions.

Adding a close button to the Information bar:

const options = {
  viewer: {
    customButtons: {
      documentbar: [],
      informationbar: [
        {
          icon: 'images/close-icon.svg'
          text: 'Close document'
          onClick: () => {
            pdfViewer.close()
        }
      }
    ],
    annotationbar: []
    }
  }
}
const pdfViewer = new PdfWebViewer(document.getElementById('pdfviewer'), '', options)