Header content
',
footer_html: '',
header_and_footer_css: '#header, #footer { background: hsl(0, 0%, 95%); } .styled { font-weight: bold; } .styled-counter { font-size: 1em; }',
wait_for_network: true,
wait_time: 0
}
}
}
```
For the complete list of V1 options, see the [V1 API documentation](../../api/module_export-pdf_exportpdf-ExportPdfConverterOptions.md) and the [V1 REST API documentation](https://pdf-converter.cke-cs.com/v1/convert/docs).
## HTML to PDF converter features
### Page setup
Configure the page size, orientation, and margins through the `document` object in `converterOptions`:
```js
converterOptions: {
document: {
size: 'A4',
orientation: 'portrait',
margins: {
top: '20mm',
bottom: '20mm',
left: '15mm',
right: '15mm'
}
}
}
```
The `size` property accepts predefined formats (`'A4'`, `'Letter'`, `'Legal'`, `'A3'`, etc.) or a custom object with `width` and `height`. For a complete example including matching editor CSS, see [Setting the page format](#setting-the-page-format).
```js
document: {
size: { width: '210mm', height: '297mm' }
}
```
### Setting the base URL
To enable proper resolution of relative URLs for images and links, pass the `base_url` option:
```js
converterOptions: {
base_url: 'https://example.com'
}
```
For editor content like:
```html
Header content
',
css: '#header { background: hsl(0, 0%, 95%); } .styled { font-weight: bold; text-align: center; }'
}
},
footers: {
default: {
html: '',
css: '#footer { background: hsl(0, 0%, 95%); } .styled-counter { font-size: 1em; color: hsl(0, 0%, 60%); }'
}
}
}
```
> **Note**
>
> To ensure that the header or footer is displayed, the margin must be big enough to accommodate it. In the code above, `document.margins.top` corresponds with the header and `document.margins.bottom` – with the footer.
You can set a background for the header or footer using the `#header` or `#footer` selector in the `css` option. These wrapper elements are provided by the converter.
#### Per-page-type headers and footers
You can define different headers and footers for the first page, odd pages, and even pages using the `first`, `odd`, and `even` keys. Each overrides the `default` for its respective pages:
```js
headers: {
default: {
html: '
Company Name
',
css: '.header { text-align: center; font-size: 10pt; }'
},
first: {
html: 'Report Title
',
css: '.header-first { text-align: center; font-size: 14pt; font-weight: bold; }'
},
odd: {
html: 'Section
',
css: '.header-odd { text-align: right; }'
},
even: {
html: ' Section
',
css: '.header-even { text-align: left; }'
}
}
```
The `footers` object follows the same structure. If a page type key is not defined, the `default` is used as a fallback.
As you can see in the examples above, you can use the `pageNumber` and `totalPages` placeholders. For more details, refer to the [REST API documentation](https://pdf-converter.cke-cs.com/v2/convert/docs).
If you import headers and footers from a Word document and want to preserve and reapply them when exporting, see the Import from Word guide’s [Preserving headers and footers](import-word/import-word.md#preserving-headers-and-footers). Note that when forwarding stored headers/footers into PDF export, you typically need to inject those header/footer converter options within the `execute` call of the `exportPdf` command. Hence, the converter receives them at export time.
### Mirror margins
Mirror margins (also known as “gutter” or “book” margins) are useful for documents intended for double-sided printing or binding. When `enable_mirror_margins` is set to `true`, the left and right margins swap between odd and even pages:
* **Odd pages (right-hand)**: `left` becomes the inner margin (near binding), `right` becomes the outer margin.
* **Even pages (left-hand)**: the margins are reversed – `right` becomes the inner margin, `left` becomes the outer margin.
```js
converterOptions: {
document: {
margins: {
top: '20mm',
bottom: '20mm',
left: '25mm',
right: '15mm',
enable_mirror_margins: true
}
}
}
```
In this example, odd pages will have a 25 mm inner margin and 15 mm outer margin, while even pages will swap to 15 mm inner and 25 mm outer, creating a mirrored layout suitable for book binding.
> **Important**
>
> For mirror margins to work correctly, you must specify at least one of the `left` or `right` margins. If both are unset, the `enable_mirror_margins` option will have no effect.
### Document metadata
Set PDF properties such as title, author, subject, keywords, and custom fields. PDF readers display this information in their document properties panel.
```js
converterOptions: {
metadata: {
title: 'Quarterly Report',
author: 'Jane Smith',
subject: 'Q1 2026 Financial Summary',
keywords: [ 'finance', 'quarterly', 'report' ],
custom_fields: {
'Department': 'Marketing',
'Document-ID': 'DOC-12345'
}
}
}
```
### Security and encryption
Protect generated PDFs with an owner password. The owner password controls document permissions (printing, copying, modifying). The PDF is encrypted with AES-256 by default.
```js
converterOptions: {
security: {
owner_password: 'securePassword123'
}
}
```
The `owner_password` is required when using this feature and must be between 6 and 64 characters.
### Digital signatures
Sign documents with PKCS#12 certificates to verify authenticity. The signature is embedded invisibly in the PDF metadata – it does not add visual elements to the document pages. PDF readers will show signature details in their signature panel.
```js
converterOptions: {
signature: {
certificate: 'base64EncodedPKCS12Certificate',
certificate_password: 'certificatePassword',
reason: 'Document approval',
location: 'New York, USA'
}
}
```
Both `certificate` (base64-encoded `.p12`/`.pfx` file) and `certificate_password` are required. The `reason` and `location` fields are optional metadata.
> **Note**
>
> PEM certificates are not supported. Convert to PKCS#12 (`.p12`/`.pfx`) format before use.
### Compression control
By default, the converter compresses PDF output for smaller file sizes. You can disable compression to preserve the original PDF structure:
```js
converterOptions: {
disable_compression: true
}
```
### Other
* By default, the generated PDF file is encoded with **`UTF-8`**.
* By default, the converter sets **`color-adjust: exact;`**. This means that your PDF document will preserve colors, images, and styles as you can see them in the editor.
* The generated document can be watermarked. [See the example and demo in the section below.](#adding-a-watermark-to-the-document)
## Examples
Check out some configuration examples that will show you how to customize the export to PDF feature. In the first example, you will learn how to add custom styling. The second example will show you how to set the page format. In the third one, you can see how to use web fonts in your configuration.
### Re-using custom editor styling
The default configuration of the [`ExportPdf`](../../api/module_export-pdf_exportpdf-ExportPdf.md) plugin attaches the default editor content styles to the HTML content sent to the converter.
However, if you need to, you can also set paths to additional CSS files. Let us assume that you already have a `my-custom-editor-styles.css` with your custom styling for the editor content that you use on your website, but you also want to include these styles in the generated PDF file.
Here is the example code:
```js
ClassicEditor
.create( {
// ... Other configuration options ...
exportPdf: {
stylesheets: [
'path/to/editor-styles.css',
'path/to/my-styles.css'
],
fileName: 'my-document.pdf'
}
} )
.then( /* ... */ )
.catch( /* ... */ );
```
This is how the corresponding editor styles may look like:
```css
/* my-custom-editor-styles.css */
/* Custom link color. */
.ck.ck-content a {
color: purple;
}
/* Custom header styling. */
.ck.ck-content h1 {
border-bottom: 2px solid;
}
/* Another custom styling... */
/* ... */
```
With these settings, the content in the generated PDF file should have the same styling as it has in the WYSIWYG editor.
> **Note**
>
> You are not obligated to use `.ck.ck-content` selectors to style your content. If your implementation contains custom CSS classes, you can use them instead.
### Setting the page format
Consistency is an important factor. To make sure that the editor content and the generated PDF file look the same, you need to match their format settings. You can change your existing style sheet or use a new one, for example, `format.css`. By default, the CKEditor Cloud Services HTML to PDF converter is set to A4 format, but you may change this setting in your configuration.
Assuming that you want to create a document in the US Letter format, with the standard margins (`19mm` for each side), here is the example code you can use:
```js
ClassicEditor
.create( {
// ... Other configuration options ...
exportPdf: {
stylesheets: [
'path/to/editor-styles.css',
'path/to/my-styles.css'
],
fileName: 'my-document.pdf',
converterOptions: {
document: {
// Document format settings with proper margins.
size: 'Letter',
orientation: 'portrait',
margins: {
top: '19mm',
bottom: '19mm',
right: '19mm',
left: '19mm'
}
}
}
}
} )
.then( /* ... */ )
.catch( /* ... */ );
```
> **Note**
>
> This example focuses only on preparing the editable to match the converter settings. As a result, the appearance of your editor may change. Depending on your editor type and implementation or even some inherited global styles like `box-sizing`, applying new `padding` values may change the size of the editor on your website.
>
> For this example, `box-sizing: border-box` was implemented to make sure that the editor’s width would not change.
Now set the corresponding editor styles:
```css
/* format.css */
/* Styles for the editable. */
.ck.ck-content.ck-editor__editable {
/* US Letter size. */
width: 215.9mm;
/* Padding is your document's margin. */
padding: 19mm;
/* You do not want to change the size of the editor by applying the new padding values. */
box-sizing: border-box;
/* ... */
}
```
With these settings, the content in the generated PDF file should have the same US Letter format layout as it has in the editor.
### Providing web font styles
This time you want to add a web font to your plugin. Let us assume that the editor is used on a page with certain typography, so the content in the editor inherits the font styles from the page. As such, these styles need to be passed to the HTML to PDF converter service.
The example below uses a web font from the Google Fonts service. For your convenience, the `@import` declaration and any font styles needed for your website are kept in a separate file, for example, `fonts.css`.
```css
/* fonts.css */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap');
html, body {
font-family: "Source Sans Pro", sans-serif;
/* ... */
}
/* ... */
```
This allows you to use the web font settings in the plugin, without any additional tweaks. Just pass the path to the file in the [`config.exportPdf.stylesheets`](../../api/module_export-pdf_exportpdf-ExportPdfConfig.md#member-stylesheets) configuration option.
The order matters here. Font declarations should be at the beginning of the style sheets’ array. Otherwise, there is no guarantee that the font styling will be applied to the PDF file. Refer to the [`config.exportPdf.stylesheets`](../../api/module_export-pdf_exportpdf-ExportPdfConfig.md#member-stylesheets) API documentation for more details.
```js
ClassicEditor
.create( {
// ... Other configuration options ...
exportPdf: {
stylesheets: [
'path/to/fonts.css',
'path/to/editor-styles.css',
'path/to/my-styles.css'
],
// More configuration of the export to PDF feature.
// ...
}
} )
.then( /* ... */ )
.catch( /* ... */ );
```
Thanks to this, the editor inherits the font settings and you can be sure that they will be applied in the generated PDF file as well.
Take a look at another example of a `fonts.css` file. Suppose that your website uses the `Source Sans Pro` font as before but this time you want the `Inter` font to be used in the WYSIWYG editor. The file should look like this:
```css
/* fonts.css */
/* Import the web font for your website. */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap');
/* Import the web font for your editor. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
/* Use the Source Sans Pro web font in your website. */
html, body {
font-family: "Source Sans Pro", sans-serif;
/* ... */
}
/* Use the Inter web font in your editor. */
.ck.ck-content.ck-editor__editable {
font-family: "Inter", sans-serif;
/* ... */
}
/* ... */
```
Having the file set like this for your website and just re-using it in [`config.exportPdf.stylesheets`](../../api/module_export-pdf_exportpdf-ExportPdfConfig.md#member-stylesheets) makes the whole setup as simple as possible.
### Adding a watermark to the document
Apart from adding a header and a footer, there is also the possibility of adding a watermark to the generated document. This can be achieved by utilizing [`config.exportPdf.dataCallback`](../../api/module_export-pdf_exportpdf-ExportPdfConfig.md#member-dataCallback).
To do this, you need to get the data that is being sent to the converter first and update it with a watermark markup:
```js
exportPdf: {
// More configuration of the export to PDF.
// ...
dataCallback: ( editor ) => {
return `
${ editor.getData() }
Draft document
`;
},
// More configuration of the export to PDF.
// ...
}
```
Then [update the custom CSS file](#re-using-custom-editor-styling) with the proper styles:
```css
.watermark {
font-size: 50px;
opacity: 0.5;
color: black;
position: fixed;
left: 20%;
top: 50%;
transform: rotate(25deg);
letter-spacing: 10px
}
```
Below you can see a simplified demo with the final result. Click the toolbar button to generate the document with a watermark.
---
Full index of the CKEditor 5 documentation: [llms.txt](../../../llms.txt)