My App
BoardKitBackend

ExportService

Board export to PNG, SVG, and PDF formats

ExportService renders board pages to image formats for download or sharing.

Supported Formats

FormatServer Canvas RequiredStatus
SVGNoFully supported
PNGYesRequires setCanvasFactory()
PDFYesRequires external PDF library

Methods

exportBoard

Exports a board to the specified format. Optionally export specific pages.

async exportBoard(
    boardId: string,
    format: ExportFormat,
    pageIds?: string[],
): Promise<Buffer>;
type ExportFormat = 'png' | 'pdf' | 'svg';
  • If pageIds is omitted, all pages are included.
  • PNG and SVG export only the first page.
  • A 40px padding is added around the content.

setCanvasFactory

Provide a server-side canvas factory for PNG rendering. Must be called before any PNG export.

setCanvasFactory(factory: ServerCanvasFactory): void;
interface ServerCanvasFactory {
    createCanvas(width: number, height: number): ServerCanvas;
}

Setup with node-canvas

import { createCanvas } from 'canvas'; // npm package: canvas
import { ExportService } from '@hfu.digital/boardkit-nestjs';

// In your module initialization:
exportService.setCanvasFactory({
    createCanvas(width: number, height: number) {
        return createCanvas(width, height);
    },
});

SVG Export

SVG export works without any external dependencies. It generates a standalone SVG document with:

  • White background rectangle
  • All elements rendered as SVG primitives (paths, rects, ellipses, text, etc.)
  • Proper z-ordering
  • Support for strokes, shapes, text, sticky notes, and image placeholders
const svgBuffer = await exportService.exportBoard(boardId, 'svg');
// Write to file or send as response

Element Rendering

The export service renders each element type:

ElementPNG RenderingSVG Rendering
StrokeCanvas path with styleSVG <path>
ShapeCanvas primitives (rect, ellipse, triangle, line, arrow)SVG <rect>, <ellipse>, <polygon>, <line>
TextfillText with multi-line supportSVG <text> with <tspan>
Sticky NoteColored rect + textSVG <rect> + <text>
ImageGray placeholder with XGray placeholder with X
GroupChildren render independentlyNo output (virtual container)
ConnectorRendered as strokeRendered as path

On this page