All Components

Image Resolution

By default, images get embedded at their original resolution.

If the content includes large images, the default behavior might cause performance issues 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.

For more information on embedding images, refer to:

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

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