Export As Image EJ2 TypeScript Pdfviewer control

20 Sep 20242 minutes to read

The PDF Viewer library allows you to export specified pages as a Base64-encoded image string using the exportAsImage() method and exporting a range of pages as Base64-encoded image strings using the exportAsImages() method.

The following steps are used to exportAsImage.

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

Step 2: The following code snippet to implement the functionality for exporting a specified page as a Base64-encoded image string or exporting a range of pages as Base64-encoded image strings.

 <button id="exportAsImage">ExportAsImage</button>

document.getElementById('exportAsImage').addEventListener('click', () => {
  let imageDetail: any;
  let pageIndex: number = 1;
  viewer.exportAsImage(pageIndex).then(function (value) {
      imageDetail = value;
      console.log(imageDetail);
  });
});

Similarly, to code snippet for exports the specified page as a Base64-encoded image string, allowing for custom image size:

 <button id="exportAsImageWithSize">ExportAsImageWithSize</button>

document.getElementById('exportAsImageWithSize').addEventListener('click', () => {
  let imageDetail: any;
  let pageIndex: number = 1;
  let size: any = {width:200, height:500};
  viewer.exportAsImage(pageIndex,size).then(function (value) {
      imageDetail = value;
      console.log(imageDetail);
  });
});

Similarly, to code snippet for exports the range of pages as Base64-encoded image strings:

 <button id="exportAsImages">ExportAsImages</button>

document.getElementById('exportAsImages').addEventListener('click', () => {
  let imageDetail: any;
  let startPageIndex: number = 1;
  let endPageIndex: number = 5;
  viewer.exportAsImages(startPageIndex, endPageIndex).then(function (value) {
      imageDetails = value;
      console.log(imageDetails);
  });
});

Similarly, to code snippet for exports the range of pages as Base64-encoded image strings, allowing for custom image size:

 <button id="exportAsImagesWithSize">ExportAsImagesWithSize</button>

document.getElementById('exportAsImagesWithSize').addEventListener('click', () => {
  let imageDetail: any;
  let startPageIndex: number = 1;
  let endPageIndex: number = 5;
  let size: any = {width:200, height:500};
  viewer.exportAsImages(startPageIndex, endPageIndex, size).then(function (value) {
      imageDetails = value;
      console.log(imageDetails);
  });
});

By following these steps, you can successfully integrate and use the export as image API in the EJ2 PDF Viewer.