How To Support Links Without Using the PDFViewer? #20631

import * as pdfjsLib from 'pdfjs-dist';

// 1. Create a minimal linkService interface
const customLinkService = {
  // Return target setting for external links (e.g. 1 = _blank)
  externalLinkTarget: 2, // 2 maps to LinkTarget.BLANK
  externalLinkRel: 'noopener noreferrer',
  
  // Handle internal destination links (e.g., jump to page 3)
  async goToDestination(dest) {
    if (typeof dest === 'string') {
      dest = await pdfDocument.getDestination(dest);
    }
    if (Array.isArray(dest)) {
      const pageRef = dest[0];
      const pageNumber = await pdfDocument.getPageIndex(pageRef) + 1;
      
      // Call your custom navigation handler here!
      myCustomNavigateToPage(pageNumber);
    }
  },

  // Handle named destination actions/page numbers
  navigateTo(dest) {
    this.goToDestination(dest);
  },

  // Get anchor URL string for a destination
  getDestinationHash(dest) {
    return '#';
  },

  // Action execution (e.g., named actions)
  executeNamedAction(action) {
    if (action === 'NextPage') myCustomNavigateToPage(currentPage + 1);
    if (action === 'PrevPage') myCustomNavigateToPage(currentPage - 1);
  }
};

// 2. Render Page and Annotation Layer
async function renderPageWithLinks(pageNumber) {
  const page = await pdfDocument.getPage(pageNumber);
  const viewport = page.getViewport({ scale: 1.5 });

  // Render Canvas
  const canvas = document.getElementById('pdf-canvas');
  const context = canvas.getContext('2d');
  canvas.width = viewport.width;
  canvas.height = viewport.height;

  await page.render({ canvasContext: context, viewport }).promise;

  // Render Annotation Layer for Links
  const annotations = await page.getAnnotations();
  const annotationLayerDiv = document.getElementById('annotation-layer');
  
  // Clear previous page annotations
  annotationLayerDiv.innerHTML = '';
  annotationLayerDiv.style.width = `${viewport.width}px`;
  annotationLayerDiv.style.height = `${viewport.height}px`;

  // Instantiate and render AnnotationLayer
  const annotationLayer = new pdfjsLib.AnnotationLayer({
    div: annotationLayerDiv,
    accessibilityManager: null,
    annotationCanvasMap: null,
    page: page,
    viewport: viewport.clone({ dontFlip: true }),
  });

  await annotationLayer.render({
    annotations,
    renderForms: false,
    linkService: customLinkService,
    downloadManager: null,
    page: page,
    viewport: viewport.clone({ dontFlip: true }),
  });
}

import { PDFLinkService, EventBus } from 'pdfjs-dist/web/pdf_viewer.mjs';

const eventBus = new EventBus();
const linkService = new PDFLinkService({
  eventBus,
  externalLinkTarget: 2, // Open external links in new tab
  externalLinkRel: 'noopener noreferrer'
});

// Bind document to linkService once loaded
linkService.setDocument(pdfDocument);

// Bind custom viewer surrogate so internal links work correctly
linkService.setViewer({
  scrollPageIntoView({ pageNumber }) {
    // Custom logic to switch page in your app
    myCustomNavigateToPage(pageNumber);
  }
});