CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Interface

ExportPdfConfig (export-pdf)

@ckeditor/ckeditor5-export-pdf/src/exportpdf

interface

The configuration of the export to PDF feature. It is used by the PDF export features from the @ckeditor/ckeditor5-export-pdf package.

ClassicEditor
	.create( editorElement, {
		exportPdf: ... // Export to PDF feature options.
	} )
	.then( ... )
	.catch( ... );

See all editor options.

Filtering

Properties

  • appID : string | undefined

    The application unique identifier.

  • converterOptions : ExportPdfConverterOptions | undefined

    The HTML to PDF converter options.

    NOTE: Configuring the plugin is not mandatory but it is highly recommended, especially if you want to get the most accurate results when generating the PDF file. To learn more, please check the HTML to PDF converter configuration.

    const exportPdfConfig = {
	converterOptions: {
		...
	}
}

    Defaults to `{ format: 'A4', margin_top: '0', margin_bottom: '0', margin_right: '0', margin_left: '0', page_orientation: 'portrait', header_html: undefined, footer_html: undefined, header_and_footer_css: undefined, wait_for_network: true, wait_time: 0 }`

  • converterUrl : string | undefined

    A URL to the HTML to PDF converter.

    const exportPdfConfig = {
	converterUrl: 'https://myconverter.com/v1/'
}

    NOTE: The plugin uses the default HTML to PDF converter delivered by CKEditor Cloud Services. You can provide a URL to an on-premises converter instead.

    Defaults to 'https://pdf-converter.cke-cs.com/v1/convert'

  • dataCallback : ( Editor ) => string | undefined

    A function to gather the HTML to be converted to PDF.

    NOTE: This option may be useful when the editor does not have getData() method, or if the HTML to be converted should be different than the edited one.

    const exportPdfConfig = {
	dataCallback: ( editor: Editor ) => {
		return `
			<header id="header">${ editor.data.get( { rootName: 'header' } ) }</header>
			<div id="content">${ editor.data.get( { rootName: 'content' } ) }</div>
		`;
	}
}

  • fileName : string | () => string | undefined

    The name of the generated PDF file.

    // Static file name.
const exportPdfConfig = {
	fileName: 'my-document.pdf'
}

// Dynamic file name.
const exportPdfConfig = {
	fileName: () => {
		const articleTitle = document.querySelector( '#title' );

		return `${ articleTitle.value }.pdf`;
	}
}

    NOTE: The file name must contain the .pdf extension. Otherwise your operating system or device may have trouble identifying the file type.

    Defaults to 'document.pdf'

  • stylesheets : Array<string> | undefined

    Paths to the .css files containing additional styling for the editor's content (the order of provided items matters).

    const exportPdfConfig = {
	stylesheets: [ './path/to/custom-style.css' ]
}

    NOTE: If stylesheets are not provided, the plugin will sent only the default editor content styles to the converter.

    Default editor's content styles: The default editor content styles are applied to the generated PDF thanks to the 'EDITOR_STYLES' token, which is provided to the stylesheets by default. If you don't want them to be applied, you have to omit the token:

    NOTE: The 'EDITOR_STYLES' string is only supported in legacy custom builds with webpack or DLLs. In other setups you always need to pass the stylesheets.

    const exportPdfConfig = {
	stylesheets: [ './path/to/custom-editor-styles.css' ]
}

    Web fonts: If you want to use web fonts in your PDF document, you should provide a path to the file containing the web font declaration before the 'EDITOR_STYLES' token and other style sheets:

    const exportPdfConfig = {
	stylesheets: [
		'./path/to/fonts.css'
		'./path/to/editor-styles.css',
	]
}

    Web fonts and custom styling: For more advanced styling, your configuration should look like this:

    const exportPdfConfig = {
	stylesheets: [
		'./path/to/fonts.css',
		'./path/to/editor-styles.css',
		'./path/to/custom-styles.css'
	]
}

    Defaults to `[ 'EDITOR_STYLES' ]`

  • token : InitializedToken | undefined

    The authentication token.

    See: token

  • tokenUrl : false | TokenUrl | undefined

    A token URL or a token request function. This field is optional and should be used only when a different tokenUrl is required for the export to PDF feature.

    Note: The token can be disabled with the false value provided.

    See: tokenUrl