CKEditor Ecosystem Documentation
Search
Contribute to this guideReport an issue
Home/CKEditor 4/Examples

Exporting editor content to PDFDocumentation

The optional Export to PDF plugin allows you to easily print the WYSIWYG editor content to a PDF file.

When enabled, the plugin adds the   (Export to PDF) button to your CKEditor 4 toolbar. When the button is clicked, the plugin sends the content of the editor together with the styles that are used to display it to the CKEditor Cloud Services HTML to PDF converter service. The service then generates a PDF document that can be downloaded by the user.

This feature is in beta version. It is free to use while in the beta phase.

This is a premium feature. Please contact us if you would like to purchase a license. Let us know if you have any feedback or questions!

PDF is a universal format that can be read and shared in many environments and applications. Use the editor below to create your content and click the Export to PDF toolbar button to generate a PDF document that you can save on your device. The plugin will export not only the rich-text content that you create but also its structure and styling, generating an output PDF file that looks as close as possible to your HTML content.

The crucial aspect of this feature is its configuration. In order to ensure that the generated PDF looks as close as possible to the same content when it is displayed in the WYSIWYG editor, the feature should be carefully configured. Refer to the documentation for an overview of the configuration options available in both the plugin and the HTML to PDF converter.

Get Sample Source Code

  • Exporting content to PDF 
                    
    CopyDownload
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Exporting content to PDF</title>
  <script src="https://cdn.ckeditor.com/4.14.0/standard-all/ckeditor.js"></script>
</head>

<body>
  <div class="container" data-sample-short>&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</div>
  <script>
    var editor = CKEDITOR.replace('editor', {
      width: 940,
      height: 700,
      extraPlugins: 'colorbutton,font,justify,print,tableresize,liststyle,pagebreak,exportpdf',
      toolbar: [{
          name: 'various',
          items: ['ExportPdf', '-', 'Undo', 'Redo']
        },
        {
          name: 'basicstyles',
          items: ['Bold', 'Italic', 'Underline', 'Strike', 'RemoveFormat', 'Subscript', 'Superscript']
        },
        {
          name: 'links',
          items: ['Link', 'Unlink']
        },
        {
          name: 'paragraph',
          items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
        },
        {
          name: 'insert',
          items: ['Image', 'Table']
        },
        {
          name: 'editing',
          items: ['Scayt']
        },
        '/',
        {
          name: 'styles',
          items: ['Format', 'Font', 'FontSize']
        },
        {
          name: 'colors',
          items: ['TextColor', 'BGColor', 'CopyFormatting']
        },
        {
          name: 'align',
          items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
        },
        {
          name: 'document',
          items: ['PageBreak', 'Source']
        }
      ],
      contentsCss: [
        'http://cdn.ckeditor.com/4.14.0/full-all/contents.css',
        'https://ckeditor.com/docs/vendors/4.14.0/ckeditor/assets/css/exportpdf.css'
      ],
      bodyClass: 'document-editor'
    });
  </script>
</body>

</html>