Skip to main content
Canvas Editor provides robust printing and export capabilities, allowing you to generate PDFs, images, and print-ready documents directly from the canvas-rendered content.

​
Printing Documents

​
Basic Print

Trigger the browser’s print dialog: 
import Editor from '@hufe921/canvas-editor'

const editor = new Editor(container, {
  main: [{ value: 'Hello World' }]
})

// Open print dialog
editor.command.executePrint()
The print command converts the canvas content to images which are then sent to the printer, ensuring exact visual fidelity.

​
Exporting to Images

​
Get Document as Images

Export all pages as base64-encoded images: 
// Get all pages as images
const imageList = await editor.command.getImage()

// imageList is an array of base64 image data
imageList.forEach((imageData, index) => {
  console.log(`Page ${index + 1}:`, imageData)
})

​
Download Images

Create downloadable image files: 
async function downloadAsImages() {
  const images = await editor.command.getImage()
  
  images.forEach((imageData, index) => {
    // Create download link
    const link = document.createElement('a')
    link.href = imageData
    link.download = `page-${index + 1}.png`
    link.click()
  })
}

// Trigger download
downloadAsImages()

const images = await editor.command.getImage()
const firstPage = images[0]

// Download first page
const link = document.createElement('a')
link.href = firstPage
link.download = 'document-page-1.png'
link.click()

​
PDF Export

PDF export functionality is available in the feature/pdf branch. See the Canvas Editor repository for implementation details.

​
Basic PDF Export

Export document to PDF using a PDF library: 
import { jsPDF } from 'jspdf'

async function exportToPDF() {
  const images = await editor.command.getImage()
  const pdf = new jsPDF({
    orientation: 'portrait',
    unit: 'mm',
    format: 'a4'
  })
  
  images.forEach((imageData, index) => {
    if (index > 0) {
      pdf.addPage()
    }
    
    // Add image to PDF (A4 size: 210x297mm)
    pdf.addImage(imageData, 'PNG', 0, 0, 210, 297)
  })
  
  pdf.save('document.pdf')
}

exportToPDF()

​
Advanced PDF Options

const pdf = new jsPDF({
  orientation: 'landscape',
  unit: 'mm',
  format: [200, 150]  // Custom dimensions
})

​
Page Configuration

​
Page Size

Set the paper size before exporting: 
import { PaperSize } from '@hufe921/canvas-editor'

// Set paper size
editor.command.executePaperSize('A4')  // 'A4', 'A3', 'Letter', etc.

​
Page Orientation

import { PaperDirection } from '@hufe921/canvas-editor'

// Set portrait orientation
editor.command.executePaperDirection(PaperDirection.VERTICAL)

// Set landscape orientation
editor.command.executePaperDirection(PaperDirection.HORIZONTAL)

​
Page Margins

Customize page margins: 
// Set page margins (in pixels)
editor.command.executeSetPaperMargin({
  top: 100,
  right: 80,
  bottom: 100,
  left: 80
})

// Get current margins
const margins = editor.command.getPaperMargin()
console.log('Current margins:', margins)

editor.command.executeSetPaperMargin({
  top: 96,    // 1 inch
  right: 96,
  bottom: 96,
  left: 96
})

​
Page Mode

Switch between editing and page modes: 
import { PageMode } from '@hufe921/canvas-editor'

// Continuous mode (for editing)
editor.command.executePageMode(PageMode.CONTINUOUS)

// Paging mode (for preview/print)
editor.command.executePageMode(PageMode.PAGING)
Paging mode shows explicit page breaks, making it easier to see how the document will print.

​
Page Scale

Adjust the zoom level for better viewing: 
// Set specific scale (0.5 = 50%, 1 = 100%, 2 = 200%)
editor.command.executePageScale(1.5)

// Zoom in
editor.command.executePageScaleAdd()

// Zoom out
editor.command.executePageScaleMinus()

// Reset to 100%
editor.command.executePageScaleRecovery()
Page scale only affects the view - it does not change the printed output size.

​
Complete Export Example

Full-featured export with options: 
import Editor, { PaperDirection, PageMode } from '@hufe921/canvas-editor'
import { jsPDF } from 'jspdf'

const container = document.querySelector('.editor')
const editor = new Editor(container, {
  main: [
    { value: 'Document Title', size: 24, bold: true },
    { value: '\n\nThis is the content of the document.' }
  ]
})

// Configure page settings
function configurePage() {
  // Set paper size
  editor.command.executePaperSize('A4')
  
  // Set orientation
  editor.command.executePaperDirection(PaperDirection.VERTICAL)
  
  // Set margins
  editor.command.executeSetPaperMargin({
    top: 96,
    right: 80,
    bottom: 96,
    left: 80
  })
  
  // Switch to paging mode
  editor.command.executePageMode(PageMode.PAGING)
}

// Export to PDF
async function exportDocument() {
  configurePage()
  
  const images = await editor.command.getImage()
  const pdf = new jsPDF({
    orientation: 'portrait',
    unit: 'mm',
    format: 'a4'
  })
  
  pdf.setProperties({
    title: 'My Document',
    author: 'Canvas Editor',
    subject: 'Document Export',
    creator: 'Canvas Editor'
  })
  
  images.forEach((imageData, index) => {
    if (index > 0) {
      pdf.addPage()
    }
    pdf.addImage(imageData, 'PNG', 0, 0, 210, 297)
  })
  
  pdf.save('document.pdf')
}

// Export to images
async function exportImages() {
  configurePage()
  
  const images = await editor.command.getImage()
  
  images.forEach((imageData, index) => {
    const link = document.createElement('a')
    link.href = imageData
    link.download = `document-page-${index + 1}.png`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  })
}

// Print document
function printDocument() {
  configurePage()
  editor.command.executePrint()
}

​
Server-Side Export

For server-side PDF generation: 
// Get document value
const documentData = editor.command.getValue()

// Send to server
fetch('/api/export-pdf', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(documentData)
})
.then(response => response.blob())
.then(blob => {
  // Download PDF
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = 'document.pdf'
  link.click()
})
Server-side rendering requires implementing Canvas Editor on the backend (Node.js with canvas library) to generate images or PDFs.
1

Configure Page Settings

Set appropriate paper size, orientation, and margins.
2

Switch to Paging Mode

Use paging mode to see exact page breaks before printing.
3

Preview

Use getImage() to preview how pages will look.
4

Print or Export

Execute print command or generate PDF/images.

​
Best Practices

  • Limit the number of pages for client-side export
  • Consider server-side rendering for large documents
  • Show loading indicators during export operations
  • Cache generated images when possible
  • Compress images before including in document
  • Use appropriate PDF compression settings
  • Consider image quality vs. file size tradeoffs
  • Optimize embedded images
  • Provide export format options (PDF, PNG, etc.)
  • Show progress for multi-page exports
  • Allow users to preview before export
  • Provide clear export success/failure feedback

​
Browser Print Dialog

Customize the print experience: 
// Configure print styles
const printStyles = `
  @media print {
    @page {
      size: A4;
      margin: 0;
    }
    body {
      margin: 0;
    }
  }
`

const style = document.createElement('style')
style.textContent = printStyles
document.head.appendChild(style)

// Then print
editor.command.executePrint()

Tables

Export documents with tables

Images

Export documents with images

Form Controls

Export filled forms

​
Additional Resources

Build docs developers (and LLMs) love

Get started for freeTalk to us