Skip to main content
Version: Version 5

Customize the Viewer

This section covers the elements customizable for the Viewer without having to build it up from the Web SDK.

Modify the save button behavior​

This sample customizes 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. This allows precise control over how documents are saved.

HTML (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>

TypeScript (index.ts)

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 save the original document without changes made in the Viewer.
  pdfWebViewer.overrideButtonBehaviour("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. This ensures that the Viewer does not perform any repairs that might alter the file’s structure or invalidate digital signatures. It is particularly useful when maintaining the document's original integrity is critical.

HTML (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>

TypeScript (index.ts)

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();