Migrating from Apryse WebViewer

npm i @pdftron/webviewer
npx --yes cpy-cli "node_modules/@pdftron/webviewer/public/**/*" public/lib/webviewer

import { useEffect, useRef } from 'react'
import WebViewer from '@pdftron/webviewer'

function App() {
  const viewerRef = useRef(null)

  useEffect(() => {
    WebViewer(
      {
        path: '/lib/webviewer',
        licenseKey: 'YOUR_LICENSE_KEY',
        initialDoc: 'https://example.com/files/contract.pdf',
      },
      viewerRef.current
    ).then((instance) => {
      // const { UI, Core } = instance
    })
  }, [])

  return <div ref={viewerRef} style={{ height: '100vh', width: '100%' }} />
}

@sdk-pdf:registry=https://registry.sdk.pdf.net
//registry.sdk.pdf.net/:_authToken=${PDF_NET_REGISTRY_TOKEN}

npm install @sdk-pdf/react

import { useMemo } from 'react'
import { CONTENT_POLICY_PRESET, PdfProviders } from '@sdk-pdf/react'
import '@sdk-pdf/react/style.css'

export function App({ isReadOnly }: { isReadOnly: boolean }) {
  // The PDF application re-renders whenever a PdfProviders prop changes identity.
  const config = useMemo(
    () => ({
      theme: { viewportPadding: 16 },
      // Applied when the viewport first mounts; switch later with useSetInteractionMode.
      initialContentPolicy: isReadOnly
        ? CONTENT_POLICY_PRESET.PDF_VIEWER
        : CONTENT_POLICY_PRESET.PDF_EDITOR,
    }),
    [isReadOnly]
  )

  return (
    <PdfProviders {...config}>
      <DocumentLoader />
    </PdfProviders>
  )
}

const { documentViewer } = instance.Core

documentViewer.addEventListener('documentLoaded', () => {
  showDocumentUi()
})

instance.UI.loadDocument('https://example.com/files/contract.pdf', {
  filename: 'contract.pdf',
  password: enteredPassword,
  // Only for files loaded over network.
  onLoadingProgress: (percent) => showProgress(percent),
  onError: (error) => showError(error),
})

import { InvalidPasswordError, useLoadPdf, useResetPdf } from '@sdk-pdf/react'

function DocumentLoader() {
  const [loadState, loadPdf] = useLoadPdf()

  async function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
    const file = event.currentTarget.files?.[0]
    if (!file) return

    const data = new Uint8Array(await file.arrayBuffer())

    try {
      // loadPdf reads from the buffer it receives, so keep `data` for a retry and pass a
      // copy.
      await loadPdf(data.slice())
    } catch (error) {
      if (error instanceof InvalidPasswordError) {
        // The password is missing or wrong: ask for it, then call
        // loadPdf(data.slice(), { password }) again.
      }
    }
  }

  if (loadState.status === 'initial') {
    return <input type="file" accept=".pdf" onChange={handleFileChange} />
  }

  if (loadState.status === 'loading') {
    return <p>Loading the document…</p>
  }

  return <PdfApplication />
}

function CloseDocumentButton() {
  const resetPdf = useResetPdf()

  // Replaces UI.closeDocument(): the load state returns to 'initial'.
  return <button onClick={() => resetPdf()}>Close</button>
}

instance.UI.disableElements(['leftPanel', 'leftPanelButton'])
instance.UI.setTheme(instance.UI.Theme.DARK)

import { Config, useViewportAutoFitScale, Viewport } from '@sdk-pdf/react'

// A fuller theme than the one in App: pass it as PdfProviders' `theme` prop, defined
// outside components so its identity is stable.
export const theme: Config['theme'] = {
  viewportPadding: [24, 16],
  classNames: { scrollViewport: 'my-viewport', page: 'my-page' },
  styles: {
    scrollViewport: { '--selection-color': 'rebeccapurple' } as React.CSSProperties,
  },
}

function PdfApplication() {
  // Fit the width once per loaded document, like opening in FitWidth.
  useViewportAutoFitScale('width')

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', height: '100vh' }}>
      <ThumbnailsSidebar />
      <div style={{ display: 'grid', gridTemplateRows: 'auto 1fr', minHeight: 0 }}>
        {/* Your toolbar: the navigation, zoom, and history controls from this guide. */}
        <Toolbar />
        {/* The viewport fills its parent, so the parent needs an explicit size. */}
        <div style={{ minHeight: 0 }}>
          <Viewport />
        </div>
      </div>
    </div>
  )
}

const { documentViewer } = instance.Core

pageCountLabel.textContent = documentViewer.getPageCount()

documentViewer.addEventListener('pageNumberUpdated', (pageNumber) => {
  pageSelect.value = pageNumber
})

pageSelect.onchange = () => documentViewer.setCurrentPage(Number(pageSelect.value), true)

import { useCurrentPageId, usePages, useScrollToPage } from '@sdk-pdf/react'

function PagePicker() {
  const pages = usePages()
  // The page in the middle of the viewport; undefined until the viewport has one.
  const currentPageId = useCurrentPageId()
  const scrollToPage = useScrollToPage()

  return (
    <select
      value={currentPageId ?? pages[0]?.id}
      onChange={(event) =>
        scrollToPage(event.currentTarget.value, { behavior: 'smooth' })
      }
    >
      {pages.map((page, index) => (
        <option key={page.id} value={page.id}>
          Page {index + 1} of {pages.length}
        </option>
      ))}
    </select>
  )
}

const doc = instance.Core.documentViewer.getDocument()

// Inserts blank pages before the given pages; the size is in PDF points.
await doc.insertBlankPages([2], 612, 792)
await doc.removePages([4])
await doc.movePages([5], 1)
// Adds the rotation to the pages' current rotation.
await doc.rotatePages([1], instance.Core.PageRotation.E_90)

import {
  usePageCreate,
  usePageDelete,
  usePageDuplicate,
  usePageMove,
  usePages,
  useSetPageRotation,
} from '@sdk-pdf/react'

function PageActions({ pageId }: { pageId: string }) {
  const pages = usePages()
  const createPage = usePageCreate()
  const deletePages = usePageDelete()
  const duplicatePage = usePageDuplicate()
  const { moveBefore } = usePageMove()
  const setPageRotation = useSetPageRotation()

  const page = pages.find((page) => page.id === pageId)
  if (!page) return null

  return (
    <div role="toolbar">
      {/* A4 is roughly 595 × 842 user-space units; the new page goes after this one. */}
      <button onClick={() => createPage(595, 842, pageId)}>
        Insert blank page after
      </button>
      <button disabled={pages.length <= 1} onClick={() => deletePages(pageId)}>
        Delete
      </button>
      <button onClick={() => void duplicatePage(pageId)}>Duplicate</button>
      {/* Without a target page, moveBefore inserts at the start of the document. */}
      <button onClick={() => moveBefore(pageId)}>Move to start</button>
      {/* Rotation is absolute: add to the current angle yourself. */}
      <button onClick={() => setPageRotation(pageId, page.rotation + 90)}>
        Rotate clockwise
      </button>
    </div>
  )
}

const { documentViewer } = instance.Core

documentViewer.addEventListener('documentLoaded', () => {
  instance.UI.setFitMode(instance.UI.FitMode.FitWidth)
  // or a fixed zoom: instance.UI.setZoomLevel('150%')
})

documentViewer.addEventListener('zoomUpdated', (zoom) => {
  persistZoom(zoom)
})

import { useEffect } from 'react'
import { useViewportFitScale, useViewportScale } from '@sdk-pdf/react'

function ZoomControls() {
  const [scale, setScale] = useViewportScale()
  const getFitScale = useViewportFitScale()

  // Every scale change, whatever the source, like zoomUpdated.
  useEffect(() => persistZoom(scale), [scale])

  function fitPage() {
    const { fitWidthScale, fitHeightScale } = getFitScale()
    // The smaller scale fits the pages in both directions, like FitPage.
    setScale(Math.min(fitWidthScale, fitHeightScale))
  }

  return (
    <div role="toolbar">
      <button onClick={() => setScale(scale / 1.25)}>−</button>
      <span>{Math.round(scale * 100)}%</span>
      <button onClick={() => setScale(scale * 1.25)}>+</button>
      <button onClick={() => setScale(getFitScale().fitWidthScale)}>Fit width</button>
      <button onClick={fitPage}>Fit page</button>
    </div>
  )
}

const { documentViewer } = instance.Core

documentViewer.addEventListener('documentLoaded', () => {
  const doc = documentViewer.getDocument()
  doc.loadThumbnail(1, (thumbnail) => {
    // thumbnail is a HTMLCanvasElement or HTMLImageElement
    thumbnailContainer.appendChild(thumbnail)
  })
})

import { PageCanvas, usePageMove, usePages, useScrollToPage } from '@sdk-pdf/react'

function ThumbnailsSidebar() {
  const pages = usePages()
  const scrollToPage = useScrollToPage()
  const { moveBefore, moveAfter } = usePageMove()

  return (
    <nav>
      {pages.map((page, index) => (
        <div key={page.id}>
          <button onClick={() => scrollToPage(page.id)}>
            <PageCanvas
              pageId={page.id}
              className="thumbnail"
              role="img"
              aria-label={`Thumbnail ${index + 1}`}
            />
          </button>
          <button
            disabled={index === 0}
            onClick={() => moveBefore(page.id, pages[index - 1]?.id)}
          >
            Move up
          </button>
          <button
            disabled={index === pages.length - 1}
            onClick={() => moveAfter(page.id, pages[index + 1]?.id)}
          >
            Move down
          </button>
        </div>
      ))}
    </nav>
  )
}

const { documentViewer, annotationManager } = instance.Core

documentViewer.addEventListener('annotationsLoaded', () => {
  // getField returns null when no field has that full name.
  const field = annotationManager.getFieldManager().getField('customer.name')
  if (field) field.setValue('Jane Doe')
})

annotationManager.addEventListener('fieldChanged', (field, value) => {
  autosave(field.name, value)
})

const { documentViewer, annotationManager, Annotations } = instance.Core

documentViewer.addEventListener('documentLoaded', () => {
  const field = new Annotations.Forms.Field('customer.name', { type: 'Tx' })
  const widgetAnnot = new Annotations.TextWidgetAnnotation(field)
  widgetAnnot.PageNumber = 1
  widgetAnnot.X = 100
  widgetAnnot.Y = 100
  widgetAnnot.Width = 200
  widgetAnnot.Height = 50

  annotationManager.getFieldManager().addField(field)
  annotationManager.addAnnotation(widgetAnnot)
  annotationManager.drawAnnotationsFromList([widgetAnnot])
})

import {
  TextWidget,
  useWidgets,
  useWidgetsCreate,
  useWidgetValue,
  Widget,
} from '@sdk-pdf/react'

function isTextWidget(widget: Widget): widget is TextWidget {
  return widget.widgetType === 'text'
}

// The counterpart of getFieldManager().getField(fieldName) for a text field, as a bound
// input.
function TextFieldByName({ fieldName }: { fieldName: string }) {
  const { widgets } = useWidgets()
  const widget = widgets
    .filter(isTextWidget)
    .find((widget) => widget.fieldName === fieldName)

  return widget ? <TextField widget={widget} /> : null
}

function TextField({ widget }: { widget: TextWidget }) {
  // Like a useState backed by the document: filling in the main view and undo update it.
  const [value, setValue] = useWidgetValue(widget)

  return (
    <label>
      {widget.fieldName}
      <input value={value} onChange={(event) => setValue(event.currentTarget.value)} />
    </label>
  )
}

function useAddNameField() {
  const createWidgets = useWidgetsCreate()

  return async (pageId: string) => {
    const [widget] = await createWidgets({
      pageId,
      widgetType: 'text',
      // User-space units: the origin is at the bottom-left corner of the page.
      x: 72,
      y: 700,
      width: 180,
      height: 24,
      fieldName: 'customer.name',
    })
    return widget
  }
}

const { documentViewer, annotationManager, Tools } = instance.Core

documentViewer.setToolMode(documentViewer.getTool(Tools.ToolNames.EDIT))
instance.UI.setToolMode(Tools.ToolNames.TEXT_SELECT)

// Content editing is a separately licensed add-on.
instance.UI.enableFeatures([instance.UI.Feature.ContentEdit])
documentViewer.getContentEditManager().startContentEditMode()

// No annotations can be added or commented on.
annotationManager.enableReadOnlyMode()
// Disables all editing features in the UI.
instance.UI.enableViewOnlyMode()

import {
  CONTENT_POLICY_PRESET,
  InteractionTool,
  useInteractionTool,
  useSetInteractionMode,
} from '@sdk-pdf/react'

const textSelectTool: InteractionTool = { type: 'textSelect' }
const selectTool: InteractionTool = { type: 'select' }
const addTextTool: InteractionTool = { type: 'addText' }

function ModeSwitch() {
  const interactionTool = useInteractionTool()
  const setInteractionMode = useSetInteractionMode()

  return (
    <div role="toolbar">
      {/* Like UI.enableViewOnlyMode(): read-only text, interactive links and widgets. */}
      <button
        aria-pressed={interactionTool.type === 'textSelect'}
        onClick={() =>
          setInteractionMode(textSelectTool, CONTENT_POLICY_PRESET.PDF_VIEWER)
        }
      >
        View
      </button>
      {/* Edit mode: select, move, and resize blocks, with editable text. */}
      <button
        aria-pressed={interactionTool.type === 'select'}
        onClick={() => setInteractionMode(selectTool, CONTENT_POLICY_PRESET.PDF_EDITOR)}
      >
        Edit
      </button>
      <button
        aria-pressed={interactionTool.type === 'addText'}
        onClick={() => setInteractionMode(addTextTool, CONTENT_POLICY_PRESET.PDF_EDITOR)}
      >
        Add paragraph
      </button>
    </div>
  )
}

const { documentViewer, annotationManager } = instance.Core
const historyManager = documentViewer.getAnnotationHistoryManager()

undoButton.onclick = () => historyManager.undo()
redoButton.onclick = () => historyManager.redo()

historyManager.addEventListener('historyChanged', () => {
  undoButton.disabled = !historyManager.canUndo()
  redoButton.disabled = !historyManager.canRedo()
})

annotationManager.addEventListener(
  'annotationChanged',
  (annotations, action, { imported }) => {
    if (imported) return
    setUnsavedChanges(true)
  }
)

import { useMemo } from 'react'
import { useHotkeys, useUndoRedo } from '@sdk-pdf/react'

function HistoryToolbar() {
  // canUndo and canRedo re-render the component as the history changes, like
  // historyChanged.
  const { undo, redo, canUndo, canRedo } = useUndoRedo()

  useHotkeys(useMemo(() => ({ 'Mod-z': undo, 'Shift-Mod-z': redo }), [undo, redo]))

  return (
    <div role="toolbar">
      <button disabled={!canUndo} onClick={undo}>
        Undo
      </button>
      <button disabled={!canRedo} onClick={redo}>
        Redo
      </button>
    </div>
  )
}

const { documentViewer, annotationManager } = instance.Core

const doc = documentViewer.getDocument()
const xfdfString = await annotationManager.exportAnnotations()
const data = await doc.getFileData({ xfdfString })
const blob = new Blob([new Uint8Array(data)], { type: 'application/pdf' })

const body = new FormData()
body.append('mydoc.pdf', blob, 'mydoc.pdf')
await fetch('/api/documents', { method: 'POST', body })

// Or let the UI download it.
await instance.UI.downloadPdf({ filename: 'contract.pdf' })

import { useRef, useState } from 'react'
import {
  useDocumentRevision,
  useDocumentRevisionGetter,
  useDocumentSaving,
} from '@sdk-pdf/react'

function SaveButtons() {
  const revision = useDocumentRevision()
  const getRevision = useDocumentRevisionGetter()
  // The revision on the server: the loaded document's revision until the first save.
  const [savedRevision, setSavedRevision] = useState(revision)
  // One save at a time, so an overlapping save can't mark a failed upload as saved.
  const isSavingRef = useRef(false)
  const { prepareDocument, downloadDocument } = useDocumentSaving()

  // Replaces annotationChanged-based tracking: undoing back to the saved state clears it
  // too.
  const hasUnsavedChanges = revision !== savedRevision

  async function upload() {
    if (isSavingRef.current) return
    isSavingRef.current = true
    try {
      // Edits made after the save starts may be missing from the saved bytes, so only
      // this revision becomes saved.
      const startRevision = getRevision()
      // The buffer goes to fetch, so don't hand out the loaded document's original
      // buffer.
      const bytes = await prepareDocument({ returnOriginalIfUnchanged: false })

      const body = new FormData()
      body.append(
        'mydoc.pdf',
        new Blob([bytes as BlobPart], { type: 'application/pdf' }),
        'mydoc.pdf'
      )
      const response = await fetch('/api/documents', { method: 'POST', body })
      // A failed upload keeps the unsaved-changes indicator.
      if (!response.ok) return

      setSavedRevision(startRevision)
    } finally {
      isSavingRef.current = false
    }
  }

  return (
    <div role="toolbar">
      <button onClick={() => void upload()}>Save</button>
      <button onClick={() => void downloadDocument()}>Download</button>
      {hasUnsavedChanges && <span>Unsaved changes</span>}
    </div>
  )
}

instance.UI.searchText('invoice', { caseSensitive: true, wholeWord: true })

import { useDocumentSearch } from '@sdk-pdf/react'

function SearchPanel() {
  const {
    criteria,
    matches,
    activeMatchIndex,
    status,
    setSearchCriteria,
    goToNextMatch,
    goToPreviousMatch,
  } = useDocumentSearch()

  return (
    <div role="search">
      <input
        value={criteria.query}
        onChange={(event) =>
          setSearchCriteria({ ...criteria, query: event.currentTarget.value })
        }
      />
      <label>
        <input
          type="checkbox"
          checked={criteria.isWholeWord}
          onChange={(event) =>
            setSearchCriteria({ ...criteria, isWholeWord: event.currentTarget.checked })
          }
        />
        Whole word
      </label>
      <span>
        {status === 'searching'
          ? 'Searching…'
          : `${activeMatchIndex + 1} of ${matches.length}`}
      </span>
      <button disabled={matches.length === 0} onClick={goToPreviousMatch}>
        Previous
      </button>
      <button disabled={matches.length === 0} onClick={goToNextMatch}>
        Next
      </button>
    </div>
  )
}

instance.UI.addEventListener(instance.UI.Events.LOAD_ERROR, (error) => {
  showError(error)
})

instance.Core.disableLogs(true)

import { useEffect } from 'react'
import { InvalidPasswordError, logMessages, LogLevel, useLoadPdf } from '@sdk-pdf/react'

function useSdkDiagnostics() {
  // The SDK never prints to the console: subscribe, and unsubscribe on unmount.
  useEffect(() => {
    const unsubscribe = logMessages.on('message', (logMessage) => {
      if (logMessage.level >= LogLevel.Warning)
        reportToMonitoring(logMessage.message, logMessage.data)
    })
    return () => {
      unsubscribe()
    }
  }, [])
}

function useOpenDocument() {
  const [, loadPdf] = useLoadPdf()

  return async (data: Uint8Array) => {
    try {
      // Pass a copy and keep `data` for a password retry.
      await loadPdf(data.slice())
    } catch (error) {
      // Replaces the LOAD_ERROR listener for this load.
      if (error instanceof InvalidPasswordError) askForPassword()
      else showError(error)
    }
  }
}

useEffect(() => {
  let instance
  let isUnmounted = false

  WebViewer({ path: '/lib/webviewer', licenseKey }, viewerRef.current).then((created) => {
    instance = created
    // The component may unmount before WebViewer resolves, such as under Strict Mode.
    if (isUnmounted) instance.UI.dispose()
  })

  return () => {
    isUnmounted = true
    instance?.UI.dispose()
  }
}, [])