Skip to main content

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 { PexelizeEditor, PexelizeEditorRef } from '@pexelize/react-editor';

function ExportDemo() {
  const editorRef = useRef<PexelizeEditorRef>(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 (
    <>
      <PexelizeEditor
        ref={editorRef}
        editorKey="pk_your_key"
        editorMode="email"
      />
      <button onClick={handleExportImage}>Export Image</button>
      <button onClick={handleExportPdf}>Export PDF</button>
      <button onClick={handleExportZip}>Export ZIP</button>
    </>
  );
}
Server-side rendering

These exports are rendered server-side by Pexelize 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 Pexelize 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 Pexelize 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 Pexelize storage​

Set saveToStorage: true on image and PDF exports to upload the result to Pexelize'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.pexelize.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​