Remove From My Forums

Export Image to PDF And excel file from Jquery Datatable

Question
0

Sign in to vote

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

0

Sign in to vote
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"));
cell.AddElement(image);
table.AddCell(cell); pdfDoc.Add(table);

Ref - Create PDF file in ASP.NET

Thanks & Regards
Tuesday, February 19, 2019 10:14 AM
0

Sign in to vote

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">
    <title></title>
    <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" />

    <script>
        $(document).ready(function () {
            $('#example').DataTable();
            $("[id$=myButtonControlID]").click(function (e) {
                window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('div[id$=divTableDataHolder]').html()));
                e.preventDefault();
            });
        });
    </script>
</head>
<body>
    <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%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <td>61</td>
                        <td>2011/04/25</td>
                        <td>$320,800<img src="Image/test.jpg" /></td>
                    </tr>
                    ...more data...
            </table>
        </div>
    </form>
</body>
</html>

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

Best Regards,

Jenifer

Friday, February 22, 2019 7:17 AM

Asked by:

Export Image to PDF And excel file from Jquery Datatable

Question

All replies