BoardKitBackend
ExportService
Board export to PNG, SVG, and PDF formats
ExportService renders board pages to image formats for download or sharing.
Supported Formats
| Format | Server Canvas Required | Status |
|---|---|---|
| SVG | No | Fully supported |
| PNG | Yes | Requires setCanvasFactory() |
| Yes | Requires 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
pageIdsis 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 responseElement Rendering
The export service renders each element type:
| Element | PNG Rendering | SVG Rendering |
|---|---|---|
| Stroke | Canvas path with style | SVG <path> |
| Shape | Canvas primitives (rect, ellipse, triangle, line, arrow) | SVG <rect>, <ellipse>, <polygon>, <line> |
| Text | fillText with multi-line support | SVG <text> with <tspan> |
| Sticky Note | Colored rect + text | SVG <rect> + <text> |
| Image | Gray placeholder with X | Gray placeholder with X |
| Group | Children render independently | No output (virtual container) |
| Connector | Rendered as stroke | Rendered as path |