Export As Image EJ2 JavaScript 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', () => {
  var imageDetail;
  var pageIndex = 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', () => {
  var imageDetail;
  var pageIndex = 1;
  var size = {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', () => {
  var startPageIndex = 1;
  var endPageIndex = 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', () => {
  var startPageIndex = 1;
  var endPageIndex = 5;
  var size = {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.