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

Exporting Image to Excel or PDF

Hi, currently I have implemented a datagrid which one column have template that shows linked text which onclick, it will show an image in dialog box. Can I know how to export the grid to pdf and have image shown in that specific column ?

These are my code right now :

        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);
        }

3 Replies 1 reply marked as answer
RR Rajapandi Ravi Syncfusion Team February 22, 2021 10:46 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 


RA Raj February 23, 2021 03:15 PM UTC

Hi, I have tried your implementation and still getting same issue. I converted image url and return base64 string. The query cell info is working fine with src but when I try to export grid to pdf, I am receiving column with base64 string instead of image.. Below are my implementation :

     function queryCellInfo(args) {// Grid's queryCellInfo event 
        if (args.column.field == "GuardImageUrl") {

            if (args.data.GuardImageUrl) {
                args.cell.querySelector('img').setAttribute('src', 'data:image/jpg;base64 ,'+ args.data.GuardImageUrl);
                //console.log(args.data.GuardImageUrl); // undefined
            }
            else {
                args.cell.querySelector('img').setAttribute('style', 'visibility: hidden');
            }
        }
    }

    // Grid's pdfQueryCellInfo event 
    function pdfQueryCellInfo(args) {
        if (args.column.headerText == 'GuardImageUrl') {
            args.value = new ej.pdfexport.PdfBitmap(args.data.GuardImageUrl); // 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 
            }
        }
    }

RR Rajapandi Ravi Syncfusion Team February 24, 2021 12:22 PM UTC

Hi Raj, 

In our previous update, we have converted the Jpeg image to base64 string and defined in the model class at server side. And we have converted that base64 string into image in the client side and displaying to the Grid by using queryCellInfo event. And then while exporting the Grid we have pass the base64 string to the PdfBitmap() method. We have checked your query in our sample which was shared in our previous update. It was working fine from our end. Please refer the below screenshot for more information. 

Screenshot: 

HomeController.cs 

 
 
Index.cshtml 

 

If your still face the issue, please share the below details that would be helpful for us to provide better solution. 

1)            Share the complete Grid code.  
 
2)            Please confirm your syncfusion package version. 
 
3)            Please share your base64 string of jpeg. 

4)            Please share any issue reproducible sample or try to reproduce the issue with our above attached sample. 


Regards,
Rajapandi R 


Marked as answer
Loader.
Up arrow icon