Export as image in Vue PDF Viewer

28 Feb 202616 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.

Composition API (Standalone)

<template>
  <div id="app">
    <button v-on:click="exportAsImage">ExportAsImage</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>

import {
  PdfViewerComponent, Toolbar, Magnification, Navigation,
  LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
  Print, TextSelection, TextSearch, FormFields, FormDesigner
} from '@syncfusion/ej2-vue-pdfviewer';
import { provide, ref } from 'vue';

let pdfviewer = ref(null);
let resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
let documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";

provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
  ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner])

let exportAsImage = function () {
  let imageDetail;
  let pageIndex: number = 1;
  const viewer = pdfviewer.value.ej2Instances;
  viewer.exportAsImage(pageIndex).then(function (value) {
      imageDetail = value;
      console.log(imageDetail);
  });
}

</script>

Options API (Standalone)

<template>
  <div id="app">
    <button v-on:click="exportAsImage">ExportAsImage</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl">
    </ejs-pdfviewer>
  </div>
</template>

<script>

import {
  PdfViewerComponent, Toolbar, Magnification, Navigation,
  LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
  Print, TextSelection, TextSearch, FormFields, FormDesigner
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  name: "App",
  data() {
    return {
      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib",
      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    };
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
      ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
  },
  methods: {
    exportAsImage: function () {
        let imageDetail;
        let pageIndex: number = 1;
        const viewer = this.$refs.pdfviewer.ej2Instances;
        viewer.exportAsImage(pageIndex).then(function (value) {
          imageDetail = value;
          console.log(imageDetail);
        });
    }
  }
}
</script>

Export a single page with a custom size

Use the same API and pass a Size object to request a custom image size.

Composition API (Standalone)

<template>
  <div id="app">
    <button v-on:click="exportAsImageWithSize">ExportAsImageWithSize</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>

import {
  PdfViewerComponent, Toolbar, Magnification, Navigation,
  LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
  Print, TextSelection, TextSearch, FormFields, FormDesigner
} from '@syncfusion/ej2-vue-pdfviewer';
import { provide, ref } from 'vue';

let pdfviewer = ref(null);
let resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
let documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";

provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
  ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner])

let exportAsImageWithSize = function () {
  let imageDetail;
  let pageIndex: number = 1;
  let size = {width:200, height: 500};
  let viewer = pdfviewer.value.ej2Instances;
  viewer.exportAsImage(pageIndex,size).then(function (value) {
    imageDetail = value;
    console.log(imageDetail);
  });
}

</script>

Options API (Standalone)

<template>
  <div id="app">
    <button v-on:click="exportAsImageWithSize">exportAsImageWithSize</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl">
    </ejs-pdfviewer>
  </div>
</template>

<script>

import {
  PdfViewerComponent, Toolbar, Magnification, Navigation,
  LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
  Print, TextSelection, TextSearch, FormFields, FormDesigner
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  name: "App",
  data() {
    return {
      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib",
      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    };
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
      ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
  },
  methods: {
    exportAsImageWithSize: function () {
        let imageDetail;
        let pageIndex: number = 1;
        let size = {width:200, height: 500};
        let viewer = this.$refs.pdfviewer.ej2Instances;
        viewer.exportAsImage(pageIndex,size).then(function (value) {
          imageDetail = value;
          console.log(imageDetail);
        });
    }
  }
}
</script>

Export a range of pages

Export a page range; the method returns an array of Base64-encoded image strings for the requested pages.

Composition API (Standalone)

<template>
  <div id="app">
    <button v-on:click="exportAsImages">exportAsImages</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>

import {
  PdfViewerComponent, Toolbar, Magnification, Navigation,
  LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
  Print, TextSelection, TextSearch, FormFields, FormDesigner
} from '@syncfusion/ej2-vue-pdfviewer';
import { provide, ref } from 'vue';

let pdfviewer = ref(null);
let resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
let documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";

provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
  ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner])

let exportAsImages = function () {
  let startPageIndex: number = 1;
  let endPageIndex: number = 5;
  let viewer = pdfviewer.value.ej2Instances;
  viewer.exportAsImages(startPageIndex, endPageIndex).then(function (value) {
      imageDetails = value;
      console.log(imageDetails);
  });
}

</script>

Options API (Standalone)

<template>
  <div id="app">
    <button v-on:click="exportAsImages">exportAsImages</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl">
    </ejs-pdfviewer>
  </div>
</template>

<script>

import {
  PdfViewerComponent, Toolbar, Magnification, Navigation,
  LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
  Print, TextSelection, TextSearch, FormFields, FormDesigner
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
    name: "App",
    data() {
      return {
        resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib",
        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      };
    },
    provide: {
      PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
        ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
    },
    methods: {
      exportAsImages: function () {
        let startPageIndex: number = 1;
        let endPageIndex: number = 5;
        let viewer = this.$refs.pdfviewer.ej2Instances;
        viewer.exportAsImages(startPageIndex, endPageIndex).then(function (value) {
            imageDetails = value;
            console.log(imageDetails);
        });
      }
  }
}
</script>

Export a range of pages with a custom size

Pass a Size object when exporting a page range to control the output image dimensions.

Composition API (Standalone)

<template>
  <div id="app">
    <button v-on:click="exportAsImageWithSize">exportAsImageWithSize</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>

import {
  PdfViewerComponent, Toolbar, Magnification, Navigation,
  LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
  Print, TextSelection, TextSearch, FormFields, FormDesigner
} from '@syncfusion/ej2-vue-pdfviewer';
import { provide, ref } from 'vue';

let pdfviewer = ref(null);
let resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
let documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";

provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
  ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner])

let exportAsImageWithSize = function () {
  let startPageIndex: number = 1;
  let endPageIndex: number = 5;
  let size: Size = new Size(200,500);
  let viewer = pdfviewer.value.ej2Instances;
  viewer.exportAsImages(startPageIndex, endPageIndex, size).then(function (value) {
      imageDetails = value;
      console.log(imageDetails);
  });
}

</script>

Options API (Standalone)

<template>
  <div id="app">
    <button v-on:click="exportAsImageWithSize">exportAsImageWithSize</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl">
    </ejs-pdfviewer>
  </div>
</template>

<script>

import {
  PdfViewerComponent, Toolbar, Magnification, Navigation,
  LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
  Print, TextSelection, TextSearch, FormFields, FormDesigner
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  name: "App",
  data() {
    return {
      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib",
      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    };
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
      ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
  },
  methods: {
    exportAsImageWithSize: function () {
      let startPageIndex: number = 1;
      let endPageIndex: number = 5;
      let size: Size = new Size(200,500);
      let viewer = this.$refs.pdfviewer.ej2Instances;
      viewer.exportAsImages(startPageIndex, endPageIndex, size).then(function (value) {
          imageDetails = value;
          console.log(imageDetails);
      });
    }
  }
}
</script>

Notes:

• Examples use pageIndex values starting at 1 as shown; confirm indexing for the viewer version in use.
• Keep code-blocks unchanged when copying samples; adjust variable names and method names to match application conventions (for example, use exportAsImagesWithSize for a range export if that naming improves clarity).
• For complete API details, consult the PDF Viewer documentation and API reference.