New to Kendo UI for Angular? Start a free 30-day trial

Exporting the Editor to PDF

Environment

ProductProgress® Kendo UI for Angular Editor

Description

How can I export the Kendo UI for Angular Editor to PDF?

Solution

By default, the Kendo UI for Angular Editor does not provide a built-in option to export its content to a PDF document.

However, you can export the content of the Editor in PDF by using the Kendo UI PDF Export component. By design, the PDF Export component exports the content of the Editor to a PDF document from any HTML that is placed inside the <kendo-pdf-export> tag.

    <kendo-pdf-export #pdf paperSize="A4" margin="1cm">
       <kendo-editor style="height: 400px;" [(value)]="value">
        ...
       </kendo-editor>
    </kendo-pdf-export>

You can export only the content of the Editor and remove some of its default styles by adding the following CSS styles.

  styles: [
    kendo-pdf-document .k-toolbar {
      display: none;
    }

    kendo-pdf-document .k-editor {
      height: 100% !important;
      border: none;
    }
]

The following example demonstrates the full implementation of the suggested approach.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?