Customize the PDF Viewer SDK

Learn about the customizable elements of the PDF Viewer SDK to modify various functionalities.

Modify save button behavior

Download the original documents with their digital signature unaffected by any changes by using the following sample code. Customize the Save button to save the original document without applying any changes made during viewing or editing. The default button behavior is overridden using overrideButtonBehaviour API method.

To enable this functionality, edit your index.ts using the following code:

import { PdfToolsViewer } from "@pdftools/pdf-web-viewer";

async function initialize() {
  const pdfWebViewer = await PdfToolsViewer.initialize();
  const container = document.getElementById("pdftools-web-viewer-container");
  container.append(pdfWebViewer);

  // Overrides the "Save" button to download the original document without changes made in the viewer.
  pdfWebViewer
    .api()
    .toolbar.button.overrideBehaviour(
      pdfWebViewer,
      "pdftools-icon-button-save",
      () => {
        pdfWebViewer.api().document.save(pdfWebViewer, { saveOriginal: true });
      }
    );
}

initialize();

Disable auto-repair feature

Disable automatic repair operations on PDF files by setting the autoRepairDisabled property to true in the open method using the following sample code. Using this configuration when maintaining the original integrity of the document is critical. This ensures that the PDF Viewer SDK does not perform any repairs that can alter the fileśs structure or invalidate digital signatures.

To enable this functionality, edit your index.ts using the following code:

import { PdfToolsViewer } from "@pdftools/pdf-web-viewer";

async function initialize() {
  const pdfWebViewer = await PdfToolsViewer.initialize();
  const container = document.getElementById("pdftools-web-viewer-container");
  container.append(pdfWebViewer);

  // URL of the PDF file (as a string)
  const url: string = "https://example.com/sample.pdf";

  pdfWebViewer.api().document.open({ uri: url, autoRepairDisabled: true });
}

initialize();

Enable accessibility layer

Enable an accessibility layer for individuals who rely on assistive technologies in the PDF Viewer SDK, such as screen readers. When the accessibility layer is enabled, the SDK generates an invisible HTML structure that mirrors the text content layout of PDFs. This structure allows screen readers to interpret the text. Additionally, when users hover over text fragments with a mouse, the screen reader reads the corresponding content aloud.

To enable this functionality, edit your index.ts using the following code:

import { PdfToolsViewer } from "@pdftools/pdf-web-viewer";

async function initialize() {
  const pdfWebViewer = await PdfToolsViewer.initialize({
    accessibilityLayerEnabled: true,
  });
  const container = document.getElementById("pdftools-web-viewer-container");
  container.append(pdfWebViewer);
}

initialize();

Provide custom HTTP headers when opening a document

When opening a document, include user-defined HTTP headers, such as authentication tokens. Custom HTTP headers can allow secure access to protected resources by passing necessary credentials or metadata in the request.

To enable this functionality, edit your index.ts using the following code:

import { PdfToolsViewer } from "@pdftools/pdf-web-viewer";

async function initialize() {
  const pdfWebViewer = await PdfToolsViewer.initialize();
  const container = document.getElementById("pdftools-web-viewer-container");
  container.append(pdfWebViewer);

  // URL of the PDF file (as a string)
  const url: string = "https://example.com/sample.pdf";

  pdfWebViewer.api().document.open({
    uri: url,
    httpOptions: {
      headers: {
        Authorization: "Bearer [TOKEN]",
      },
    },
  });
}

initialize();