1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Exporting Image to Excel or PDF

Exporting Image to Excel or PDF

Hi, I am working on template grid with export function, but when I click export, I see that particular image column is showing URL instead of picture. I am wondering is there any built-in function that allows the conversion or do I need to convert that image into base64 so that image can be shown after export.

This is my code :

       var gridObj = document.getElementById("AttendanceGrid").ej2_instances[0];

        var selected = gridObj.getSelectedRecords();

        if (args.item.id === 'PrintProfileBtn') {

            gridObj.print();

        } else if (args.item.id === 'ExportexcelBtn') {

            var excelExportProperties = {

                fileName: "AttendanceGrid.xlsx"

            };

            gridObj.excelExport(excelExportProperties);

        } else if(args.item.id === 'ExportpdfBtn') {

            var pdfExportProperties = {

                fileName: "AttendanceGrid.pdf"

            };

            gridObj.pdfExport(pdfExportProperties);

        }

Any helps will be appreciated, thanks


1 Reply 1 reply marked as answer
RR Rajapandi Ravi Syncfusion Team February 22, 2021 10:45 AM UTC

Hi Raj, 

Greetings from syncfusion support 

We have validated your requirement. Unfortunately, we do not have support for exporting images to excel or pdf. We have already added this to our feature list and it will be included in our upcoming Volume 1, 2021 Release, which is expected in the End of March. You can contact us through the feedback portal and also track the status of the issue using below feedback link.  


So for now we have achieved your requirement in sample level. We suggest you to follow the below way to achieve your requirement. We have analyzed your query and we could see that you like to export the image in pdf document. To achieve your requirement you have to convert the image into base64 string with the Grid datasource. While exporting the pdf document the pdfQueryCellInfo event gets triggered. In this event, We have pass the base64 string into pdfBitMap() method and also you can set the height of the image cell as per your requirement. Please refer the below code example and sample for more information. 

<script> 
 
    // Grid's toolbarClick event 
    function toolbarClick(args) { 
        var gridObj = document.getElementById("Grid").ej2_instances[0]; 
        if (args.item.id === 'Grid_pdfexport') { 
            gridObj.pdfExport(); 
        } 
    } 
//When you display the image in Grid to column, you need to convert this base64 string to image. We suggest you to use queryCellInfo event of the Grid to achieve this requirement. 
 
    function queryCellInfo(args) {// Grid's queryCellInfo event 
        if (args.column.field == "Image") { 
            args.cell.querySelector('img').setAttribute('src', 'data:image/jpeg;base64 ,' + args.data.Image); 
            args.cell.querySelector('img').setAttribute('width', 150); 
            args.cell.querySelector('img').setAttribute('height', 150); 
        } 
    } 
 
    // Grid's pdfQueryCellInfo event 
    function pdfQueryCellInfo(args) { 
        if (args.column.headerText == 'Image') {  
            args.value = new ej.pdfexport.PdfBitmap(args.data.Image); // pass base64 of jpeg 
            for (var i = 0; i < args.cell.gridRow.pdfGrid.rows.rows.length; i++) { 
                args.cell.gridRow.pdfGrid.rows.getRow(i).height = "50"; //set height 
            } 
        } 
    } 
</script> 



Screenshot: 

 

Regards,
Rajapandi R 


Marked as answer
Loader.
Up arrow icon