PDF Atelier Logo

PDF Atelier

exportPdf

Exports the annotated PDF as a Blob with all visible annotations baked in.

exportPdf()

Exports the annotated PDF as a Blob. All visible annotations (text, drawings, shapes, images, highlights) are baked into the exported PDF. Text annotations remain as vector (selectable), while brush drawings and images are rasterized.

Prop

Type

Returns: Promise<Blob>

Parameters: None

Implementation

import { useRef } from 'react';
import { PDFAtelier, type PDFAtelierRef } from '@innosoft/pdf-atelier-react';

export default function ExportExample() {
  const pdfRef = useRef<PDFAtelierRef>(null);

  const handleExport = async () => {
    try {
      const blob = await pdfRef.current?.exportPdf();
      if (blob) {
        // Method 1: Download directly
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'annotated-document.pdf';
        a.click();
        URL.revokeObjectURL(url);

        // Method 2: Send to server
        const formData = new FormData();
        formData.append('file', blob, 'annotated.pdf');
        await fetch('/api/save-pdf', { method: 'POST', body: formData });
      }
    } catch (error) {
      console.error('Export failed:', error);
    }
  };

  return (
    <>
      <button onClick={handleExport}>Export PDF</button>
      <PDFAtelier
        ref={pdfRef}
        src="/document.pdf"
        license="My License"
        showSave={true}
      />
    </>
  );
}
import { Component, ViewChild } from '@angular/core';
import { PdfAtelierWrapper } from '@innosoft/pdf-atelier-angular';

@Component({
  standalone: true,
  selector: 'app-export',
  imports: [PdfAtelierWrapper],
  template: `
    <button (click)="exportPdf()">Export Annotated PDF</button>
    <pdf-atelier-wrapper
      [src]="'/document.pdf'"
      [license]="'My License'"
      [showSave]="true"
    ></pdf-atelier-wrapper>
  `,
})
export class ExportComponent {
  @ViewChild(PdfAtelierWrapper) pdfAtelier!: PdfAtelierWrapper;

  async exportPdf() {
    try {
      const blob = await this.pdfAtelier.exportPdf();

      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'annotated.pdf';
      a.click();
      URL.revokeObjectURL(url);
    } catch (error) {
      console.error('Export failed:', error);
    }
  }
}
<script setup lang="ts">
import { ref } from 'vue';
import PdfAtelierWrapper from '@innosoft/pdf-atelier-vue';

interface PdfAtelierExposed {
  exportPdf(): Promise<Blob>;
}

const pdfRef = ref<PdfAtelierExposed | null>(null);

const exportPdf = async () => {
  try {
    const blob = await pdfRef.value?.exportPdf();
    if (blob) {
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'annotated.pdf';
      a.click();
      URL.revokeObjectURL(url);
    }
  } catch (error) {
    console.error('Export failed:', error);
  }
};
</script>

<template>
  <div>
    <button @click="exportPdf">Export PDF</button>
    <PdfAtelierWrapper
      ref="pdfRef"
      :src="'/document.pdf'"
      :license="'My License'"
      :showSave="true"
    />
  </div>
</template>

On this page