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:


<script lang="ts">
  import { PDFViewer, type PluginRegistry } from '@embedpdf/svelte-pdf-viewer';
 
  let registry = $state<PluginRegistry | null>(null);
 
  const handleReady = (r: PluginRegistry) => {
    registry = r;
  };
 
  const triggerDownload = () => {
    const exportPlugin = registry?.getPlugin('export')?.provides();
 
    // Trigger download for the active document
    exportPlugin?.download();
 
    // Trigger download for a specific document
    // exportPlugin?.forDocument(documentId).download();
  };
</script>
 
<PDFViewer onready={handleReady} config={{ src: '/doc.pdf' }} />

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.


<script lang="ts">
  import { PDFViewer, type PluginRegistry } from '@embedpdf/svelte-pdf-viewer';
 
  let registry = $state<PluginRegistry | null>(null);
 
  const handleReady = (r: PluginRegistry) => {
    registry = r;
  };
 
  const handleSave = async () => {
    const exportPlugin = registry?.getPlugin('export')?.provides();
 
    // 1. Get the PDF data as an ArrayBuffer
    const arrayBuffer = await exportPlugin?.saveAsCopy().toPromise();
    if (!arrayBuffer) return;
 
    // 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!');
  };
</script>
 
<PDFViewer onready={handleReady} config={{ src: '/doc.pdf' }} />

Export & Save

Configuration

Programmatic Control

Triggering a Download

Saving to a Server

Need Help?