Export & Save

The PDFViewer includes built-in functionality to export the current PDF. This isn’t just downloading the original file; the export plugin generates a new PDF file that includes any changes the user has made, such as:

Annotations (Highlights, Ink, Shapes)
Redactions (Applied and burned in)
Form filled data

Configuration

You can configure the default filename via the export config property.


<PDFViewer
  config={{
    export: {
      // Used if the document doesn't have a known filename
      defaultFileName: 'exported-document.pdf' 
    }
  }}
/>

Programmatic Control

While the default toolbar includes a download button, you often need to trigger these actions from your own UI or handle the file data directly (e.g., to save it to a database).

Triggering a Download

To programmatically trigger the browser’s download dialog for a specific document:


const triggerDownload = async () => {
  const registry = await viewerRef.current?.registry;
  const exportPlugin = registry.getPlugin('export').provides();
 
  // Trigger download for the active document
  exportPlugin.download();
 
  // Trigger download for a specific document
  // exportPlugin.forDocument(documentId).download();
};

Saving to a Server

A common requirement is to save the modified PDF back to your server instead of downloading it to the user’s computer.

You can use the saveAsCopy() method for this. It returns a Task that you can convert to a Promise using toPromise(), which resolves with an ArrayBuffer containing the full PDF binary data.


const handleSave = async () => {
  const registry = await viewerRef.current?.registry;
  const exportPlugin = registry.getPlugin('export').provides();
 
  // 1. Get the PDF data as an ArrayBuffer
  const arrayBuffer = await exportPlugin.saveAsCopy().toPromise();
 
  // 2. Convert ArrayBuffer to a Blob/File
  const blob = new Blob([arrayBuffer], { type: 'application/pdf' });
  const file = new File([blob], 'updated-doc.pdf');
 
  // 3. Upload to your server
  const formData = new FormData();
  formData.append('file', file);
  formData.append('id', '12345');
 
  await fetch('/api/documents/save', {
    method: 'POST',
    body: formData
  });
 
  console.log('Document saved successfully!');
};

Export & Save

Configuration

Programmatic Control

Triggering a Download

Saving to a Server

Need Help?