Export to PDF

By default, the Kendo UI Editor for Angular 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 generates 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">

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.

import { Component, ViewEncapsulation } from '@angular/core';

/* tslint:disable:max-line-length */
    selector: 'my-app',
    template: `
    <kendo-pdf-export #pdf paperSize="A4" margin="1cm">
       <kendo-editor [iframe]="false" style="height: 400px;" [(value)]="value">
          <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
          <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
          <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
          <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>
          <kendo-toolbar-button kendoEditorInsertImageButton></kendo-toolbar-button>
            text="Export as PDF"
    // View Encapsulation must be disabled in order to style the exported content
    encapsulation: ViewEncapsulation.None,
    styles: [`
    kendo-pdf-document .k-toolbar {
      display: none;

    kendo-pdf-document .k-editor {
      height: 100% !important;
      border: none;
export class AppComponent {
   public value = `
      <img src="https://c2.staticflickr.com/2/1574/25734996011_637430f5d8_c.jpg" width="300px" />
          The Kendo UI Angular Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
          In this version, the Editor provides the core HTML editing engine which includes basic text formatting, hyperlinks, and lists.
          The widget <strong>outputs identical HTML</strong> across all major browsers, follows
          accessibility standards, and provides API for content manipulation.
      <p>Features include:</p>
          <li>Text formatting</li>
          <li>Bulleted and numbered lists</li>
          <li>Cross-browser support</li>
          <li>Identical HTML output across browsers</li>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { PDFExportModule } from '@progress/kendo-angular-pdf-export';
import { IntlModule } from '@progress/kendo-angular-intl';
import { NumericTextBoxModule } from '@progress/kendo-angular-inputs';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { EditorModule } from '@progress/kendo-angular-editor';

import { AppComponent } from './app.component';

  imports:      [
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
export class AppModule { }

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();

In this article