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">
       ...
      </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.

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

/* tslint:disable:max-line-length */
@Component({
    selector: 'my-app',
    template: `
    <kendo-pdf-export #pdf paperSize="A4" margin="1cm">
       <kendo-editor [iframe]="false" style="height: 400px;" [(value)]="value">
        <kendo-toolbar>
          <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>
          <kendo-toolbar-button
            text="Export as PDF"
            [icon]="'pdf'"
            (click)="pdf.saveAs('editor-content.pdf')"></kendo-toolbar-button>
        </kendo-toolbar>
       </kendo-editor>
    </kendo-pdf-export>
  `,
    // 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" />
      <p>
          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>
      <p>Features include:</p>
      <ul>
          <li>Text formatting</li>
          <li>Bulleted and numbered lists</li>
          <li>Hyperlinks</li>
          <li>Cross-browser support</li>
          <li>Identical HTML output across browsers</li>
      </ul>
       `;
}
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';

@NgModule({
  imports:      [
    BrowserModule,
    BrowserAnimationsModule,
    ButtonsModule,
    IntlModule,
    FormsModule,
    NumericTextBoxModule,
    PDFExportModule,
    EditorModule
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

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

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article