All Components

Embedded Images

To export images successfully, make sure that their extensions are correct.

For example, a .png image with a .jpg extension, which is displayed on a page, might not show up in the exported PDF file or might cause exceptions in the PDF reader. For more information on loading images from different domains, refer to the article on known limitations.

Image Resolution

By default, images get embedded at their original resolution. If the content includes large images, this behavior might cause performance problems and out-of-memory errors.

To limit the resolution of the images in the output file, set the desired value to imageResolution in the dots per inch (DPI) unit.

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

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
      <kendo-buttongroup [selection]="'single'">
        <button kendoButton [togglable]="true" (click)="setResolution()" [selected]="true">
            Original
        </button>
        <button kendoButton [togglable]="true" (click)="setResolution(36)">
            36 dpi
        </button>
      </kendo-buttongroup>

      <button kendo-button (click)="pdf.saveAs('image-resolution.pdf')">
        Save As PDF...
      </button>
    </div>

    <kendo-pdf-export #pdf [imageResolution]="resolution">
      <img src="https://c2.staticflickr.com/2/1574/25734996011_637430f5d8_c.jpg" width="750px" />
    </kendo-pdf-export>
  `
})
export class AppComponent {
  public resolution: number;

  public setResolution(value?: number): void {
    this.resolution = value;
  }
}
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 { AppComponent }   from './app.component';

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

export class AppModule { }
import { enableProdMode, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
In this article