How to bind table data dynamically to pdfmake table body using jquery

Ashok Kumar 161 Reputation points
2023-03-27T10:52:54.96+00:00 
I have created a HTML Table and I want to download selected columns into pdf using pdfmake below is my code example

html code :-

<div id="tablediv">
<table id="stockalloctbl_1">
<thead>
<tr role="row">
<th>Col_A</th>
<th>Col_B</th>
 <th>Col_C</th>
 </tr>
</thead>
<tbody>
<tr>
<td>data1</td>
 <td>data2</td>
  <td>data3</td>
 </tr>
<tr>
<td>gama1</td>
<td>gama2</td>
<td>gama3</td>
</tr>
<tr>
<td>vega1</td>
<td>vega2</td>
 <td>vega3</td>
 </tr>
<tr>
<td>theta1</td>
<td>theta2</td>
<td>theta3</td>
 </tr>
</tbody>
</table>

<input type="button" value="Export" onclick="Export()" />
</div>

using cdn links are:-

 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" rel="stylesheet" ></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" rel="stylesheet" ></script>


            <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
            <script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
            <link rel="Stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />

        <script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>

        <link rel="Stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />

Jqury logic :-

$(document).ready(function () {

        "use strict";         

          Export();

    });

function Export() {

//$("tr").each(function () {

//    alert($(this).children("td:eq(0)").text());

//    alert($(this).children("td:eq(1)").text());

//    alert($(this).children("td:eq(2)").text());

//});

var a = ['A', 'B', 'C'];

var b = ['Value 1', 'Value 2', 'Value 3'];

  var docDefinition = {

    content: [

        {

table: {

 headerRows: 1,

                widths: ['*', 'auto', 100],

        //body: [

                //    ['First', 'Second', 'Third', 'The last one'],

                //    ['Value 1', 'Value 2', 'Value 3', 'Value 4'],

                //    [{ text: 'Bold value', bold: true, fillColor:"green"}, 'Val 2', 'Val 3', 'Val 4'],

                //    ['V 1', 'V 2', 'V 3', 'V 4'],

                //]

                body: [a,b,] // here I want to pass dynamic data

            }

        }

    ]

};

// download the PDF

pdfMake.createPdf(docDefinition).download('optionalName.pdf');

}

this is the jafiddle example:- 
https://jsfiddle.net/5cmaz0ug/1/

In the above Export() method code is working fine but I want to pass the data dynamically to this body: [a,b,] {how many rows are there to that table that all rows td should pass dynamically to this body}

I'm not sure how to pass dynamic data.

Please suggest me how to pass table rows td data dynamically to the body.

Hope you understand my issue and sorry for my bad English.
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,254 questions
0 comments
Accepted answer
  1. Lan Huang-MSFT 25,556 Reputation points Microsoft Vendor
    2023-03-28T06:49:00.5466667+00:00

    Hi @Ashok Kumar,

    how can we stop to print one particular column on pdf download (I mean only allow download the Col__A and Col_B td data

    You can find the table header by row.find("TH").eq(0).html(). Then find the data through row.find("TD").eq(0).html(), and specify the index of eq(index) according to the row you need. For details, you can refer to the code below.

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" rel="stylesheet"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" rel="stylesheet"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
    <link rel="Stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
    <script>
        function Export() {
            var res = new Array();
            $("#stockalloctbl_1 tbody tr").each(function () {
                var row = $(this);
                var data = {};
                data.Col_A = row.find("TD").eq(0).html();
                data.Col_B = row.find("TD").eq(1).html();
                res.push(data);
            });
            var re = [];
            $("#stockalloctbl_1 thead tr").each(function () {
                var row = $(this);
                var A = row.find("TH").eq(0).html();
                var B = row.find("TH").eq(1).html();
                re.push(A, B);

            });
            var docDefinition = {
                content: [
                    { text: 'Dynamic parts', style: 'header' },
                    table(res, re)
                ]
            }
            // download the PDF

            pdfMake.createPdf(docDefinition).download('optionalName.pdf');

        }
        function buildTableBody(data, columns) {
            var body = [];
            body.push(columns);
            data.forEach(function (row) {
                var dataRow = [];

                columns.forEach(function (column) {
                    dataRow.push(row[column].toString());
                })
                body.push(dataRow);
            });
            return body;
        }
        function table(data, columns) {
            return {
                table: {
                    headerRows: 1,
                    widths: ['*', 'auto', 100],
                    body: buildTableBody(data, columns)
                }
            };
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="tablediv">
            <table id="stockalloctbl_1">
                <thead>
                    <tr role="row">
                        <th>Col_A</th>
                        <th>Col_B</th>
                        <th>Col_C</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>data1</td>
                        <td>data2</td>
                        <td>data3</td>
                    </tr>
                    <tr>
                        <td>gama1</td>
                        <td>gama2</td>
                        <td>gama3</td>
                    </tr>
                    <tr>
                        <td>vega1</td>
                        <td>vega2</td>
                        <td>vega3</td>
                    </tr>
                    <tr>
                        <td>theta1</td>
                        <td>theta2</td>
                        <td>theta3</td>
                    </tr>
                </tbody>
            </table>

            <input type="button" value="Export" onclick="Export()" />
        </div>
    </form>
</body>
</html>

    User's image

    Best regards,
    Lan Huang

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Bruce (SqlWork.com) 56,026 Reputation points
    2023-03-27T20:37:44.6+00:00

    pretty trivial:

    function Export() {
  const body = $("#stockalloctbl_1 tr")
    .toArray()
  	.map(tr => $(tr).find("th, td")
          .toArray()
          .map(td => $(td).text())
    );
  var docDefinition = {
     content: [ {
		table: {
	   	    headerRows: 1,
            widths: ['*', 'auto', 100],
		    body: body
         }
      }]
   };

    // download the PDF
   pdfMake.createPdf(docDefinition).download('optionalName.pdf');
}