PDF.js: Access outline, bookmarks, and metadata

const outline = await pdfDocument.getOutline();

{
  title: "Chapter 1: Introduction",  // Display text.
  bold: false,                        // Bold styling.
  italic: false,                      // Italic styling.
  color: Uint8ClampedArray(3),        // RGB color [r, g, b].
  dest: [...],                        // Internal destination (page + position).
  url: null,                          // External URL (if it links outside).
  unsafeUrl: null,                    // Unsanitized version of `url`, before PDF.js escapes it.
  newWindow: false,                   // Whether an external URL should open in a new window.
  count: 3,                           // Number of child items.
  items: [...]                        // Nested child outline items.
}

function OutlineSidebar({ pdfDocument, linkService }) {
  const [outline, setOutline] = useState(null);

  useEffect(() => {
    pdfDocument.getOutline().then(setOutline);
  }, [pdfDocument]);

  if (!outline) return <div>No outline available</div>;

  return <OutlineTree items={outline} linkService={linkService} />;
}

function OutlineTree({ items, linkService, depth = 0 }) {
  return (
    <ul style={{ paddingLeft: depth * 16 }}>
      {items.map((item, i) => (
        <li key={i}>
          <button
            onClick={() => {
              if (item.dest) {
                linkService.goToDestination(item.dest);
              } else if (item.url) {
                window.open(item.url, "_blank");
              }
            }}
            style={{
              fontWeight: item.bold ? "bold" : "normal",
              fontStyle: item.italic ? "italic" : "normal",
            }}
          >
            {item.title}
          </button>
          {item.items?.length > 0 && (
            <OutlineTree
              items={item.items}
              linkService={linkService}
              depth={depth + 1}
            />
          )}
        </li>
      ))}
    </ul>
  );
}

// Named destination (string).
linkService.goToDestination("chapter-1");

// Explicit destination (array).
linkService.goToDestination([
  pageRef,         // Page reference object { num, gen } from `getDestination()`.
                   // — Convert with `pdfDocument.getPageIndex(pageRef)` if you need an index.
  { name: "XYZ" }, // Type: XYZ, Fit, FitH, FitV, FitR, FitB.
  x,               // x position (or null).
  y,               // y position (or null).
  zoom,            // Zoom level (or null).
]);

// Resolve a named destination to an explicit destination array.
const dest = await pdfDocument.getDestination("chapter-1");
// Returns: [pageRef, { name: "XYZ" }, x, y, zoom].

// Get all named destinations.
const destinations = await pdfDocument.getDestinations();

const metadata = await pdfDocument.getMetadata();

{
  info: {
    Title: "My Document",
    Author: "John Doe",
    Subject: "PDF Guide",
    Keywords: "pdf, javascript",
    Creator: "LaTeX",
    Producer: "pdfTeX-1.40.25",
    CreationDate: "D:20240115120000Z",
    ModDate: "D:20240115120000Z",
    PDFFormatVersion: "1.7",
    IsLinearized: false,
    IsAcroFormPresent: false,
    IsXFAPresent: false,
    IsCollectionPresent: false,
    IsSignaturesPresent: false,
  },
  metadata: {
    // XMP metadata (XML-based, may contain additional fields).
    // Access via `metadata.get("dc:title")`, `metadata.get("dc:creator")`, etc.
  },
  contentDispositionFilename: null,
  contentLength: 1234567,
  hasStructTree: true,  // True if the PDF has an accessibility structure tree.
}

function DocumentInfo({ pdfDocument }) {
  const [info, setInfo] = useState(null);

  useEffect(() => {
    pdfDocument.getMetadata().then(({ info }) => setInfo(info));
  }, [pdfDocument]);

  if (!info) return null;

  return (
    <div>
      <h3>Document Properties</h3>
      <dl>
        <dt>Title</dt><dd>{info.Title || "Untitled"}</dd>
        <dt>Author</dt><dd>{info.Author || "Unknown"}</dd>
        <dt>Creator</dt><dd>{info.Creator}</dd>
        <dt>Pages</dt><dd>{pdfDocument.numPages}</dd>
        <dt>PDF Version</dt><dd>{info.PDFFormatVersion}</dd>
        <dt>Has Forms</dt><dd>{info.IsAcroFormPresent ? "Yes" : "No"}</dd>
      </dl>
    </div>
  );
}

const attachments = await pdfDocument.getAttachments();

{
  "report.xlsx": {
    filename: "report.xlsx",
    content: Uint8Array(...),  // Raw file data.
    description: "Quarterly report data",
  },
  "photo.jpg": {
    filename: "photo.jpg",
    content: Uint8Array(...),
  },
}

function AttachmentList({ pdfDocument }) {
  const [attachments, setAttachments] = useState(null);

  useEffect(() => {
    pdfDocument.getAttachments().then(setAttachments);
  }, [pdfDocument]);

  if (!attachments) return <div>No attachments</div>;

  const downloadAttachment = (attachment) => {
    const blob = new Blob([attachment.content]);
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = attachment.filename;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <ul>
      {Object.entries(attachments).map(([name, attachment]) => (
        <li key={name}>
          <button onClick={() => downloadAttachment(attachment)}>
            {attachment.filename}
          </button>
          {attachment.description && <span> — {attachment.description}</span>}
        </li>
      ))}
    </ul>
  );
}

const optionalContentConfig = await pdfDocument.getOptionalContentConfig();

// List all groups.
const groups = optionalContentConfig.getGroups();
// { "layer-id-1": { name: "Dimensions", visible: true }, ... }

// Toggle a layer.
optionalContentConfig.setVisibility("layer-id-1", false);

// Rerender affected pages after toggling.
viewer.optionalContentConfigPromise = Promise.resolve(optionalContentConfig);

instance.setViewState((v) =>
  v.set("sidebarMode", NutrientViewer.SidebarMode.BOOKMARKS),
);

const documentInfo = await instance.getDocumentInfo();
console.log(documentInfo.title, documentInfo.author);