Реалізація PDF-переглядача на сайті

Реалізація PDF-просмотрщика на сайті

Вбудований просмотрщик PDF потрібен в кабінетах документообігу, сторінках договорів, порталах нормативних документів, системах звітності. <iframe src="file.pdf" title="Embedded content"> — ні: поведінка залежить від браузера, мобільний Chrome завантажує файл замість показу, нема ніякого контролю над UI.

PDF.js

Mozilla PDF.js — стандарт для браузерного рендерингу PDF. Використовує Canvas для рендерингу кожної сторінки. Саме його використовує Firefox для вбудованого просмотрщика.

npm install pdfjs-dist
npm install react-pdf  # React-обгортка над PDF.js

react-pdf: простої реалізація

import { Document, Page, pdfjs } from 'react-pdf'
import 'react-pdf/dist/esm/Page/AnnotationLayer.css'
import 'react-pdf/dist/esm/Page/TextLayer.css'

// Обов'язково вказуємо worker
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.mjs',
  import.meta.url,
).toString()

interface PDFViewerProps {
  url: string
}

export function PDFViewer({ url }: PDFViewerProps) {
  const [numPages, setNumPages] = useState<number>(0)
  const [pageNumber, setPageNumber] = useState<number>(1)
  const [scale, setScale] = useState<number>(1.0)
  const [isLoading, setIsLoading] = useState(true)

  function onDocumentLoadSuccess({ numPages }: { numPages: number }) {
    setNumPages(numPages)
    setIsLoading(false)
  }

  return (
    <div className="flex flex-col items-center">
      {/* Тулбар */}
      <div className="flex items-center gap-4 p-3 bg-gray-800 text-white w-full">
        <button
          onClick={() => setPageNumber((p) => Math.max(1, p - 1))}
          disabled={pageNumber <= 1}
          className="px-3 py-1 bg-gray-600 rounded disabled:opacity-40"
        >
          ←
        </button>
        <span className="text-sm">
          {pageNumber} / {numPages}
        </span>
        <button
          onClick={() => setPageNumber((p) => Math.min(numPages, p + 1))}
          disabled={pageNumber >= numPages}
          className="px-3 py-1 bg-gray-600 rounded disabled:opacity-40"
        >
          →
        </button>
        <div className="ml-auto flex items-center gap-2">
          <button onClick={() => setScale((s) => Math.max(0.5, s - 0.25))}>−</button>
          <span className="text-sm w-12 text-center">{Math.round(scale * 100)}%</span>
          <button onClick={() => setScale((s) => Math.min(3, s + 0.25))}>+</button>
        </div>
      </div>

      {/* Документ */}
      <div className="overflow-auto bg-gray-200 w-full" style={{ maxHeight: '80vh' }}>
        <Document
          file={url}
          onLoadSuccess={onDocumentLoadSuccess}
          loading={<div className="p-8 text-center">Завантаження...</div>}
          error={<div className="p-8 text-center text-red-500">Помилка завантаження PDF</div>}
        >
          <Page
            pageNumber={pageNumber}
            scale={scale}
            renderTextLayer={true}     // Виділяємий текст
            renderAnnotationLayer={true} // Кліквбельні посилання
            className="shadow-lg mx-auto my-4"
          />
        </Document>
      </div>
    </div>
  )
}

Показ всіх сторінок (scroll mode)

Для довгих документів прокрутка зручніше за пагінацію:

function PDFScrollViewer({ url }: { url: string }) {
  const [numPages, setNumPages] = useState(0)
  const [containerWidth, setContainerWidth] = useState(0)
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!containerRef.current) return
    const observer = new ResizeObserver(([entry]) => {
      setContainerWidth(entry.contentRect.width)
    })
    observer.observe(containerRef.current)
    return () => observer.disconnect()
  }, [])

  return (
    <div ref={containerRef} className="overflow-auto" style={{ height: '80vh' }}>
      <Document file={url} onLoadSuccess={({ numPages }) => setNumPages(numPages)}>
        {Array.from({ length: numPages }, (_, i) => (
          <Page
            key={i + 1}
            pageNumber={i + 1}
            width={containerWidth - 32}  // Адаптивна ширина
            className="mb-4 shadow mx-4"
            renderTextLayer={true}
          />
        ))}
      </Document>
    </div>
  )
}

Віртуалізація сторінок для великих PDF

100-сторінковий PDF рендерити весь зразу — не потрібно. Використовуємо віртуалізацію:

import { useVirtualizer } from '@tanstack/react-virtual'

function VirtualPDFViewer({ url }: { url: string }) {
  const [numPages, setNumPages] = useState(0)
  const [pageHeight] = useState(842) // A4 при scale=1
  const parentRef = useRef<HTMLDivElement>(null)

  const virtualizer = useVirtualizer({
    count: numPages,
    getScrollElement: () => parentRef.current,
    estimateSize: () => pageHeight + 16, // висота сторінки + відступ
    overscan: 2,
  })

  return (
    <div ref={parentRef} style={{ height: '80vh', overflow: 'auto' }}>
      <Document file={url} onLoadSuccess={({ numPages }) => setNumPages(numPages)}>
        <div style={{ height: virtualizer.getTotalSize(), position: 'relative' }}>
          {virtualizer.getVirtualItems().map((virtualItem) => (
            <div
              key={virtualItem.key}
              style={{
                position: 'absolute',
                top: 0,
                transform: `translateY(${virtualItem.start}px)`,
                width: '100%',
                padding: '8px 16px',
              }}
            >
              <Page
                pageNumber={virtualItem.index + 1}
                width={600}
                renderTextLayer={false}  // Вимикаємо для швидкості
              />
            </div>
          ))}
        </div>
      </Document>
    </div>
  )
}

Захищені PDF через Blob URL

Щоб користувач не міг завантажити файл напряму за URL:

async function loadProtectedPDF(documentId: string): Promise<string> {
  const response = await fetch(`/api/documents/${documentId}/content`, {
    headers: { Authorization: `Bearer ${getToken()}` },
  })

  if (!response.ok) throw new Error('Access denied')

  const blob = await response.blob()
  return URL.createObjectURL(blob)
  // Blob URL діє лише у межах сесії браузера
  // Прямої ссилки нема — лише через API з авторизацією
}

Що робимо

Налаштовуємо PDF.js з react-pdf, вибираємо режим відображення (постраничний або скролл), додаємо тулбар з зумом та навігацією. Для великих документів — віртуалізація сторінок. Для закритих документів — завантаження через авторизований API з Blob URL.

Термін: базовий просмотрщик — 1 день. З віртуалізацією та захистом доступу — 2–3 дні.