Export Image to PDF And excel file from Jquery Datatable RRS feed

  • Question

  • User-257070954 posted

    Hi All,

                How can i export image to PDF and excel file with datatable data  using jquery datatable ? in datatable each row containing the image. those image i want to export PDF or Excel file

    Tuesday, February 19, 2019 6:44 AM

All replies

  • User-2054057000 posted

    Generating PDF is not related to jQuery Datatables plugin. To generated pdf with images you have to use iTextSharp which is a free DLL which you can install from NuGet.

    Now with iTextSharp you can add images to pdf like shown by the below code:

    PdfPTable table =
    new PdfPTable(2);
    PdfPCell cell = new PdfPCell();

    Image image = Image.GetInstance(Server.MapPath("~/Upload/jack.jpg"));

    Ref - Create PDF file in ASP.NET

    Thanks & Regards

    Tuesday, February 19, 2019 10:14 AM
  • User-257070954 posted

    Hi Thanks for your response.

                                                In Jquery Datatable plugin Expot feature is available. I already exporting data to excel and pdf using Datatable jqury pugin. Now i want to to export images also

    Wednesday, February 20, 2019 8:38 AM
  • User839733648 posted

    Hi binustrat,

    According to your description, I suggest that you could use the following code:

    window.open('data:application/vnd.ms-excel,' +  $('div[id$=divTableDataHolder]').html());

    Pay attention that for converting into MS Excel, we will specify data:application/vnd.ms-excel as MIME type. 

    Here is a working sample.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
            $(document).ready(function () {
                $("[id$=myButtonControlID]").click(function (e) {
                    window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('div[id$=divTableDataHolder]').html()));
        <form id="form1" runat="server">
            <button id="myButtonControlID">Export Table data into Excel</button>
            <div id="divTableDataHolder">
                <table id="example" class="display" style="width: 100%">
                            <th>Start date</th>
                            <td>Tiger Nixon</td>
                            <td>System Architect</td>
                            <td>$320,800<img src="Image/test.jpg" /></td>
                        ...more data...

    Reference: https://codepattern.net/Blog/post/jQuery-export-table-data-into-MS-Excel 

    Best Regards,


    Friday, February 22, 2019 7:17 AM