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 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! You can also sign up for the CKEditor Premium Features 30-day Free Trial.

If this feature is used without authentication, the resulting document will be watermarked.

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 
    <!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.24.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>
  <textarea id="editor">&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;</textarea>
  <script>
    // These styles are used to provide the "page view" display style like in the demo and matching styles for export to PDF.
    CKEDITOR.addCss(
      'body.document-editor { margin: 0.5cm auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }' +
      'body.document-editor, div.cke_editable { width: 700px; padding: 1cm 2cm 2cm; } ' +
      'body.document-editor table td > p, div.cke_editable table td > p { margin-top: 0; margin-bottom: 0; padding: 4px 0 3px 5px;} ' +
      'blockquote { font-family: sans-serif, Arial, Verdana, "Trebuchet MS", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } ');

    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']
        }
      ],
      bodyClass: 'document-editor',
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>