Skip to main content
Version: Latest

Export PDF, Image & ZIP

Generate high-fidelity PDFs, images, and ZIP archives from the current design. All three use server-side headless Chromium rendering.

import { useRef } from "react";
import { DragbleEditor, DragbleEditorRef } from "dragble-react-editor";

function ExportDemo() {
  const editorRef = useRef<DragbleEditorRef>(null);

  const handleExportImage = async () => {
    const result = await editorRef.current?.editor?.exportImage({
      format: "png",
      width: 640,
      fullPage: true,
    });
    if (result?.imageData) {
      // imageData is a base64 data-URL: "data:image/png;base64,..."
      window.open(result.imageData);
    }
  };

  const handleExportPdf = async () => {
    const result = await editorRef.current?.editor?.exportPdf({
      pageSize: "a4",
      orientation: "portrait",
    });
    if (result?.pdfData) {
      const a = document.createElement("a");
      a.href = result.pdfData;
      a.download = "template.pdf";
      a.click();
    }
  };

  const handleExportZip = async () => {
    const result = await editorRef.current?.editor?.exportZip({
      imageFolder: "images",
    });
    if (result?.zipData) {
      const a = document.createElement("a");
      a.href = result.zipData;
      a.download = "template.zip";
      a.click();
    }
  };

  return (
    <>
      <DragbleEditor
        ref={editorRef}
        editorKey="db_your_key"
        editorMode="email"
      />
      <button onClick={handleExportImage}>Export Image</button>
      <button onClick={handleExportPdf}>Export PDF</button>
      <button onClick={handleExportZip}>Export ZIP</button>
    </>
  );
}

:::info Server-side rendering These exports are rendered server-side by Dragble using headless Chromium. They are not available in popup editor mode. Use exportHtml() instead for popups. :::

Image export options​

const result = await editor.exportImage({
  format: "png", // 'png' | 'jpg'
  width: 640, // Output width in pixels (100–2000, default 640)
  height: null, // Viewport height, null = auto (default null)
  fullPage: true, // Capture full scrollable page (default true)
  quality: 90, // JPEG quality 1–100, ignored for PNG (default 90)
  deviceScaleFactor: 2, // 1–3, use 2 for retina (default 1)
  saveToStorage: false, // true = upload and return URL, false = base64 data-URL
  mergeTags: {
    // Replace merge tags before rendering
    first_name: "Jane",
  },
});
OptionTypeDefaultDescription
format'png' | 'jpg''png'Output image format
widthnumber640Output width in pixels (100–2000)
heightnumber | nullnullViewport height. null = auto-height
fullPagebooleantrueCapture full scrollable page vs viewport only
qualitynumber90JPEG quality (1–100). Ignored for PNG
deviceScaleFactornumber1Scale factor (1–3). Use 2 for retina displays
saveToStoragebooleanfalseUpload to Dragble storage and return a hosted URL
mergeTagsRecord<string, string>undefinedMerge tag replacements applied before rendering

Return value (ExportImageData):

  • imageData — base64 data-URL when saveToStorage is false (default)
  • url — hosted URL when saveToStorage is true
  • design — the design JSON at the time of export

PDF export options​

const result = await editor.exportPdf({
  pageSize: "a4", // 'full' | 'letter' | 'a4' | 'a3'
  orientation: "portrait", // 'portrait' | 'landscape' (ignored for 'full')
  printBackground: true, // Include CSS backgrounds (default true)
  margin: {
    // Page margins in CSS units
    top: "10mm",
    right: "10mm",
    bottom: "10mm",
    left: "10mm",
  },
  width: 768, // Viewport width in CSS pixels (default 768)
  saveToStorage: false, // true = upload and return URL
  mergeTags: {
    // Replace merge tags before rendering
    company: "Acme Inc.",
  },
});
OptionTypeDefaultDescription
pageSize'full' | 'letter' | 'a4' | 'a3''full'Page size preset. 'full' = single continuous page
orientation'portrait' | 'landscape''portrait'Page orientation. Ignored when pageSize is 'full'
printBackgroundbooleantrueInclude CSS background colors and images
margin{ top?, right?, bottom?, left? }undefinedPage margins in CSS units (e.g. '10mm')
widthnumber768Viewport width in CSS pixels
saveToStoragebooleanfalseUpload to Dragble storage and return a hosted URL
mergeTagsRecord<string, string>undefinedMerge tag replacements applied before rendering

Return value (ExportPdfData):

  • pdfData — base64 data-URL when saveToStorage is false (default)
  • url — hosted URL when saveToStorage is true
  • design — the design JSON at the time of export

ZIP export options​

The ZIP archive bundles the HTML template with all referenced images downloaded locally.

const result = await editor.exportZip({
  imageFolder: "images", // Folder name inside ZIP for images (default 'images')
});
OptionTypeDefaultDescription
imageFolderstring'images'Folder name for images inside the ZIP archive

Return value (ExportZipData):

  • zipData — base64 data-URL of the ZIP archive
  • design — the design JSON at the time of export

Save exports to Dragble storage​

Set saveToStorage: true on image and PDF exports to upload the result to Dragble's managed storage. The return value will include a url field with the hosted URL instead of a base64 data-URL:

const result = await editor.exportImage({
  format: "png",
  saveToStorage: true,
});

console.log(result.url);
// "https://assets.dragble.com/exports/abc123.png"

Method reference​

MethodReturnsDescription
exportImage(options?)Promise<ExportImageData>Export as PNG or JPG image (server-side rendered)
exportPdf(options?)Promise<ExportPdfData>Export as PDF document (server-side rendered)
exportZip(options?)Promise<ExportZipData>Export as ZIP with HTML + images

Next steps​