PDF.js accessibility, StructTree, presentation mode, and printing

async function renderStructTree(page, viewport, container) {
  const structTree = await page.getStructTree();

  if (structTree) {
    // The struct tree can be used to build accessible DOM elements
    // that map to the visual content on the page.
    const treeLayer = document.createElement("div");
    treeLayer.className = "structTree";
    // `buildAccessibleTree` is your own helper — walk `structTree.children`
    // and emit semantic HTML (`h1`–`h6`, `p`, `ul`/`li`, `table`) with `aria-*` attributes.
    buildAccessibleTree(treeLayer, structTree);
    container.appendChild(treeLayer);
  }
}

const markInfo = await pdfDocument.getMarkInfo();
// `{ Marked: true, UserProperties: false, Suspects: false }`.

if (markInfo?.Marked) {
  console.log("This PDF has accessibility tags");
}

const pdfjs = await import("pdfjs-dist/web/pdf_viewer.mjs");

const presentationMode = new pdfjs.PDFPresentationMode({
  container: document.getElementById("pdf-container"),
  pdfViewer: viewer,
  eventBus,
});

// Enter presentation mode.
presentationMode.request();

// Listen for presentation mode changes.
eventBus.on("presentationmodechanged", (evt) => {
  // `evt.state` is a `PresentationModeState` enum value:
  // `UNKNOWN` (0), `NORMAL` (1), `CHANGING` (2), `FULLSCREEN` (3).
  console.log(evt.state);
});

// Navigate in presentation mode.
document.addEventListener("keydown", (e) => {
  if (e.key === "ArrowRight" || e.key === " ") {
    viewer.nextPage();
  } else if (e.key === "ArrowLeft") {
    viewer.previousPage();
  } else if (e.key === "Escape") {
    // Exit is handled automatically.
  }
});

/* Hide UI elements in presentation mode */
.pdfPresentationMode .pdf-toolbar,
.pdfPresentationMode .sidebar {
  display: none !important;
}

.pdfPresentationMode #pdf-container {
  background: black;
}

.pdfPresentationMode .page {
  margin: 0 auto;
}

// Trigger print via `EventBus`.
eventBus.dispatch("print", { source: window });

// Or use the window print with PDF.js preparation.
window.print();

async function printPdf(pdfDocument) {
  const printContainer = document.createElement("div");
  printContainer.className = "printContainer";
  document.body.appendChild(printContainer);

  for (let i = 1; i <= pdfDocument.numPages; i++) {
    const page = await pdfDocument.getPage(i);
    const viewport = page.getViewport({ scale: 3 }); // High-res for print.

    const canvas = document.createElement("canvas");
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    await page.render({
      canvasContext: canvas.getContext("2d"),
      viewport,
      intent: "print", // Optimizes rendering for print.
    }).promise;

    const pageDiv = document.createElement("div");
    pageDiv.className = "printPage";
    pageDiv.appendChild(canvas);
    printContainer.appendChild(pageDiv);
  }

  window.print();
  document.body.removeChild(printContainer);
}

@media print {
  body > *:not(.printContainer) {
    display: none !important;
  }

  .printContainer {
    display: block !important;
  }

  .printPage {
    page-break-after: always;
  }

  .printPage canvas {
    width: 100%;
    height: auto;
  }
}

await page.render({
  canvasContext: context,
  viewport,
  intent: "print", // vs `"display"` (default).
}).promise;

const labels = await pdfDocument.getPageLabels();
// ["i", "ii", "iii", "iv", "1", "2", "3", ...]
// or `null` if no custom labels.

if (labels) {
  // Use `labels[pageIndex]` instead of page numbers in your UI.
  const label = labels[currentPage - 1]; // "iii" instead of "3".
}

const jsActions = await pdfDocument.getJSActions();
// `{ OpenAction: ["app.alert('Welcome')"], ... }`.

// Accessibility is built into the viewer — no manual StructTree rendering required.
// Keyboard navigation, screen reader support, and ARIA labels are wired up
// to support WCAG 2.1 AA accessibility goals.

// Print at high resolution with a single call.
instance.print();