PDF Export

Polotno's client-side PDF export supports bleed areas and crop marks. This guide covers how to export PDFs with these features.

Raster vs Vector PDFs

Client-side PDF exports (saveAsPDF(), toPDFDataURL()) generate raster PDFs — each page contains a flattened JPEG/PNG image embedded in the PDF file.

Advantages of raster PDFs:

• Most consistent results — exported PDF looks identical to what users see on the canvas
• High quality with pixelRatio — suitable even for print-ready workflows when quality is critical
• Client-side rendering — no server required, instant results

For vector PDFs (resolution-independent, smaller file sizes), use the Cloud Render API or the Node package @polotno/pdf-export based on your deployment needs.

Quick Start

Export PDF with bleed and crop marks:

store.activePage.set({ bleed: 35 }); // 35px

// export with bleed and crop marks
await store.saveAsPDF({ 
  includeBleed: true,
  cropMarkSize: 20,
  pixelRatio: 2  // higher quality
});

Bleed Area

Bleed is the area beyond the trim edge where design elements extend. Standard bleed is 20 pixels beyond each edge.

// set bleed
store.activePage.set({ bleed: 20 });

// show bleed area on canvas
store.toggleBleed(true);

See Page Bleed for details on working with bleed in the editor.

Crop Marks

Crop marks (trim marks) show where to cut. They appear as small lines at each corner of the trim box.

// add crop marks to PDF export
await store.saveAsPDF({ 
  cropMarkSize: 20  // length of crop marks in pixels
});

Requirements:

• Crop marks only work with PDF exports (not PNG/JPEG)

Export Quality

Use pixelRatio to control resolution. Higher values produce print-ready quality suitable for professional workflows:

// standard quality
await store.saveAsPDF({ pixelRatio: 1 });

// high quality (recommended for print)
await store.saveAsPDF({ pixelRatio: 2 });

// ultra-high quality (for critical print work)
await store.saveAsPDF({ pixelRatio: 4 });

Note: The dpi parameter affects PDF page dimensions, not image quality. Use pixelRatio to increase quality.

See Units and Measures for DPI details.

Complete Example

// setup design with bleed
store.setSize(2480, 3508); // A4 at 300 DPI
store.activePage.set({ bleed: 35 }); // 3mm bleed

// export high-quality PDF with bleed and crop marks
await store.saveAsPDF({ 
  fileName: 'design.pdf',
  includeBleed: true,
  cropMarkSize: 20,
});

Export Options

await store.saveAsPDF({
  fileName: 'design.pdf',
  includeBleed: true,      // include bleed area
  cropMarkSize: 20,        // crop mark length in pixels
  pixelRatio: 2,           // resolution multiplier
  onProgress: (progress) => console.log(progress)
});

See Store API for complete reference.

Vector PDF Export

Polotno supports vector output via two options. Choose the option that matches your hosting model and compliance requirements.

• Cloud Render API — request hosted rendering with vector: true for Browser or Node workloads that can call HTTP services.
• @polotno/pdf-export — run fully offline conversion inside Node 18+ processes.

Node Package @polotno/pdf-export

Install the package and generate a vector PDF directly from Polotno JSON in your build or automation pipeline. This approach fits CI jobs, backend services, and desktop tools that already run in Node.

npm install @polotno/pdf-export

import fs from 'fs/promises';
import { jsonToPDF } from '@polotno/pdf-export';

const data = JSON.parse(await fs.readFile('./polotno.json', 'utf-8'));

await jsonToPDF(data, './output.pdf');

Use pdfx1a: true when you need print-ready files with CMYK conversion, transparency flattening, and font outlining. The option ensures compatibility with print vendors that expect PDF/X-1a-compliant assets.

await jsonToPDF(data, './print-ready.pdf', {
  pdfx1a: true,
  metadata: {
    title: 'Catalog Cover',
    author: 'Marketing Team',
    application: 'Polotno Automation 1.0',
  },
});

Spot colors map specific fills or strokes in your design to separation inks for foil or Pantone workflows. You can define multiple inks and reuse the same configuration across batch exports.

await jsonToPDF(data, './foil-cover.pdf', {
  pdfx1a: true,
  spotColors: {
    '#FFD700': {
      name: 'Gold Foil',
      type: 'pantone',
      pantoneCode: 'Pantone 871 C',
      cmyk: [0, 0.15, 0.5, 0],
    },
  },
});

Any element that uses the mapped color is exported with the correct separation ink, and CMYK fallbacks ensure predictable previews. Validations in Adobe Acrobat's Output Preview confirm the separations.

Tip: Verify spot colors in Adobe Acrobat by checking Output Preview > Separations.

Note: Install GhostScript on the host machine (brew install ghostscript, apt-get install ghostscript, or download from ghostscript.com) to enable PDF/X-1a conversion. Without GhostScript the conversion falls back to standard PDF output.

Troubleshooting

Bleed not visible on canvas? Use store.toggleBleed(true).

Low quality? Increase pixelRatio to 2 or 4.

Wrong page size? Adjust dpi parameter (controls PDF page dimensions, not quality).

Related

• Page Bleed — working with bleed in the editor
• Cloud Render API — vector PDF export
• Units and Measures — DPI and unit conversion
• Store API — complete export API reference