Sign up (with export icon)

ExportPdfConfig

Api-interface icon 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( ... );
Copy code

See all editor options.

Properties

  • Chevron-right icon

    appID : string | undefined

    The application unique identifier.

  • Chevron-right icon

    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: {
    		...
    	}
    }
    
    Copy code

    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 }`

  • Chevron-right icon

    converterUrl : string | undefined

    A URL to the HTML to PDF converter.

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

    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'

  • Chevron-right icon

    dataCallback : ( editor: 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>
    		`;
    	}
    }
    
    Copy code

    Defaults to `( editor: Editor ) => editor.getData()`

  • Chevron-right icon

    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`;
    	}
    }
    
    Copy code

    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'

  • Chevron-right icon

    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' ]
    }
    
    Copy code

    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' ]
    }
    
    Copy code

    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',
    	]
    }
    
    Copy code

    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'
    	]
    }
    
    Copy code

    Defaults to `[ 'EDITOR_STYLES' ]`

  • Chevron-right icon

    token : InitializedToken | undefined

    The authentication token.

    See: token

  • Chevron-right icon

    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