Export pages as images in PDF Viewer

25 Feb 20262 minutes to read

The PDF Viewer component can export pages as Base64-encoded image strings using the exportAsImage() method (single page) and exportAsImages() method (page range). The examples below demonstrate single-page export, range export, and how to specify a custom image size.

Steps to export pages as images

Step 1: Follow the steps provided in the link to create a simple PDF Viewer sample.

Step 2: Use the following code to export a specified page as a Base64-encoded image or a range of pages as Base64-encoded images.

<button (click)="exportAsImage()">ExportAsImage</button>

exportAsImage() {
  let imageDetail;
  let pageIndex: number = 1;
  var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];
  viewer.exportAsImage(pageIndex).then(function (value) {
      imageDetail = value;
      console.log(imageDetail);
  });
}

Export a specified page as a Base64-encoded image with a custom size:

<button (click)="exportAsImageWithSize()">exportAsImageWithSize</button>

exportAsImageWithSize() {
  let imageDetail;
  let pageIndex: number = 1;
  let size: Size = new Size(200,500);
  var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];
  viewer.exportAsImage(pageIndex,size).then(function (value) {
      imageDetail = value;
      console.log(imageDetail);
  });
}

Export a range of pages as Base64-encoded image strings:

<button (click)="exportAsImages()">exportAsImages</button>

exportAsImages() {
  let startPageIndex: number = 1;
  let endPageIndex: number = 5;
  var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];
  viewer.exportAsImages(startPageIndex, endPageIndex).then(function (value) {
      imageDetails = value;
      console.log(imageDetails);
  });
}

Export a range of pages as Base64-encoded images with a custom size:

<button (click)="exportAsImageWithSize()">exportAsImageWithSize</button>

exportAsImageWithSize() {
  let startPageIndex: number = 1;
  let endPageIndex: number = 5;
  let size: Size = new Size(200,500);
  var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];
  viewer.exportAsImages(startPageIndex, endPageIndex, size).then(function (value) {
      imageDetails = value;
      console.log(imageDetails);
  });
}

These APIs enable exporting viewer pages as images for further processing or download.