export-data

The functionality is available in PRO Edition only

PRO

Assembles the current board view into an export payload and dispatches it to either a remote export service (PDF/PNG) or a host-supplied function (e.g. for client-side xlsx generation). PRO feature.

Usage

type ExportConfig = {
	url?:
		| string
		| ((
				data: ExportConfig,
				records: KanbanCard[],
				helpers: ExportHelpers
		  ) => void);
	format?: string;
	fileName?: string;
	skin?: string;
	paper?: PaperConfig;
	excel?: ExcelConfig;
};

Field	Type	Description
url	string | function	Transport selector. A string URL POSTs a hidden form to the export service. A function receives the payload directly. Omitting url assembles but doesn't dispatch.
format	string	Export format: "pdf", "png", "xlsx", etc. Default: "pdf".
fileName	string	Output file name (without extension). Default: "tasks".
skin	string	Server-side theme. Default: "willow".
paper	PaperConfig	PDF/PNG page options (see below).
excel	ExcelConfig	Excel-specific options (see below).

PaperConfig:

Field	Type	Description
fitSize	boolean	Fit content to page size
size	string | { width: number; height: number }	Page size (e.g. "A4")
landscape	boolean	Landscape orientation
styles	string | string[]	Extra CSS; URLs are fetched and inlined
margins	{ top?, bottom?, left?, right? }	Page margins in px
header	string	Page header HTML
footer	string	Page footer HTML
scale	number	Render scale factor

ExcelConfig:

Field	Type	Description
sheetNames	string[]	Sheet names in the workbook
dateFormat	string	Date format string
indent	"native" | "spaces"	Indentation style

ExportHelpers (passed to function transports):

Field	Type	Description
post	(url: string, data: Record<string, string>) => void	Hidden-form POST helper
serialize	(value: any) => string	JSON serializer with Date handling

Trigger

import { version } from "@svar-ui/react-kanban";

api.exec("export-data", {
	url: "https://svar-export.webix.io/kanban/" + version,
	format: "pdf",
	skin: "print",
});

Export to xlsx using a function transport:

api.exec("export-data", {
	url: (cfg, records, helpers) => {
		// build xlsx from records client-side
	},
	format: "xlsx",
});

Observe

api.on("export-data", ev => {
	console.log("Export triggered:", ev.format);
});

Intercept

api.intercept("export-data", ev => {
	// cancel export for empty boards
	const state = api.getState();
	return state.viewData.columns.some(c => c.cards.length > 0);
});

Component handler

<Kanban
    cards={cards}
    columns={columns}
    onExportData={(ev) => console.log("Exported:", ev.format)}
/>

Related

• Export and import guide - PDF, PNG, xlsx export and Excel import
• ExportPopup - UI for collecting export options
• getCards - get unfiltered source cards for client-side export