I need to find a way to transform an HTML table into a PDF using JavaScript or jQuery. The challenge I'm facing is that the table contains hidden rows in the HTML, and I want these hidden rows to also appear in the generated PDF.
Currently, when I convert the table to a PDF, the hidden rows are not included. The table displays some rows in the HTML, and then the user navigates to the next page of the table. I want all pages of the table to be visible in the PDF document.
Below is the code snippet in HTML and JavaScript:
<!DOCTYPE html>
<html>
<body>
<div id="tab">
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Job</th>
</tr>
<tr>
<td>Brian</td>
<td>41</td>
<td>Blogger</td>
</tr>
<tr>
<td>Matt</td>
<td>25</td>
<td>Programmer</td>
</tr>
<tr>
<td>Arun</td>
<td>39</td>
<td>Writer</td>
</tr>
<tr style="display: none">
<td>Arun</td>
<td>39</td>
<td>Writer</td>
</tr>
<tr style="display: none">
<td>Arun</td>
<td>39</td>
<td>Writer</td>
</tr>
<tr style="display: none">
<td>Arun</td>
<td>39</td>
<td>Writer</td>
</tr>
</table>
</div>
<p>
<input type="button" value="Create PDF"
id="btPrint" onclick="createPDF()" />
</p>
</body>
<script>
function createPDF() {
var sTable = document.getElementById('tab').innerHTML;
var style = "<style>";
style += "table {width: 100%;font: 17px Calibri;}";
style += "table, th, td {border: solid 1px #DDD; border-collapse: collapse;";
style += "padding: 2px 3px;text-align: center;}";
style += "</style>";
// CREATE A WINDOW OBJECT.
var win = window.open('', '', 'height=700,width=700');
win.document.write('<html><head>');
win.document.write('<title>Profile</title>'); // <title> FOR PDF HEADER.
win.document.write(style); // ADD STYLE INSIDE THE HEAD TAG.
win.document.write('</head>');
win.document.write('<body>');
win.document.write(sTable); // THE TABLE CONTENTS INSIDE THE BODY TAG.
win.document.write('</body></html>');
win.document.close(); // CLOSE THE CURRENT WINDOW.
win.print(); // PRINT THE CONTENTS.
}
</script>
</html>