Customize the PDF Viewer SDK

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

Modify save button behavior

Use this configuration to download the original documents with their digital signature unaffected by any changes. 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.

Edit your index.ts using the following code:

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

async function initialize() {
  const pdfWebViewer = await PdfToolsViewer.init();
  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

This sample demonstrates how to disable automatic repair operations on PDF files by setting the autoRepairDisabled property to true in the open method. Use 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.

Edit your index.ts using the following code:

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

async function initialize() {
  const pdfWebViewer = await PdfToolsViewer.init();
  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();