Export PDF pages as images in ASP.NET Core PDF Viewer

The PDF Viewer library enables exporting individual pages as Base64-encoded image strings by using the exportAsImage() method and exporting page ranges as Base64-encoded image strings by using the exportAsImages() method.

Follow these steps to export PDF pages as images.

Step 1: Follow the steps in the Getting Started with ASP.NET Core PDF Viewer guide to create a sample and reference the required EJ2 script and style resources.

Step 2: Add the following code to enable exporting a specified page or a range of pages as Base64-encoded image strings. Place the script after the viewer markup so it executes once the PDF Viewer instance is available.

Standalone

<button type="button" onclick="exportAsImage()">ExportAsImage</button>
<div style="width:100%;height:600px">
    @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
</div>

<script>
    function exportAsImage() {
        var imageDetail;
        var pageIndex = 1;
        var viewer = document.getElementById('pdfviewer').ej2_instances[0];
        viewer.exportAsImage(pageIndex).then(function (value) {
            imageDetail = value;
            console.log(imageDetail);
        });
    }
</script>

Use the following code snippet to export a specified page as a Base64-encoded image string while supplying a custom image size:

Standalone

<button type="button" onclick="exportAsImageWithSize()">ExportAsImageWithSize</button>
<div style="width:100%;height:600px">
    @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
</div>

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

Use this code snippet to export a range of pages as Base64-encoded image strings:

Standalone

<button type="button" onclick="exportAsImages()">ExportAsImages</button>
<div style="width:100%;height:600px">
    @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
</div>

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

Use this code snippet to export a range of pages as Base64-encoded image strings while specifying a custom image size:

Standalone

<button type="button" onclick="exportAsImageWithSize()">ExportAsImageWithSize</button>
<div style="width:100%;height:600px">
    @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
</div>

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

By following these steps, you can integrate the export-as-image APIs into the EJ2 PDF Viewer. Store the generated Base64 data securely and consider optimizing image size when working with large documents.