mysqlnode.jspdf

Generating PDF from a HTML page

I am trying to generate a PDF document that only includes the table on the page by clicking the "Generate PDF" button. My problem is how to generate the PDF document. Here I attached a screenshot of my web page.

SS

I just need to print that table to the generated pdf.

Here is my code.

<!DOCTYPE HTML>
<html lang="en">
<head>
  <title>Fetch using MySQL and Node.js</title>
 <style>
   table {
     border-collapse: collapse;
     width: 50%;
     align-self: center;
   }

   th, td {
     text-align: left;
     padding: 8px;
  }

  tr:nth-child(even) {background-color: #f2f2f2;}

  th {
    background-color: #04AA6D;
    color: white;
  }
 </style>
 </head>
 <body>
   <div class="table-data" id="makepdf">
   <h2>Display Data using Node.js & MySQL</h2>
   <button id="button">Generate PDF</button>
   <table>
    <tr>
        <th>Date</th>
        <th>Description</th>
        <th>Debit</th>
        <th>Credit</th>
    </tr>
    
    <%
    if(userData.length!=0){
    var i=1;
    userData.forEach(function(data){
    %>
    <tr>
        <td><%=data.date %></td>
        <td><%=data.description %></td>
        <td><%=data.debit %></td>
        <td><%=data.credit %></td>
    </tr>
    
    <%  i++; }) %>
    <% } else{ %>
        <tr>
            <td colspan="7">No Data Found</td>
        </tr>
    <% } %>
   </table>
   </div>
</body>
</html>
Solution

  • Just combine both previous answers, the page button to invoke "save as PDF" OR other user choice of printout, will not show in the print media as shown here.

    enter image description here

    <!DOCTYPE HTML>
<html lang="en">
<head>
  <title>Fetch using MySQL and Node.js</title>
 <style>
   @media print {
     #button {
       display: none;
     }
   }

   table {
     border-collapse: collapse;
     width: 50%;
     align-self: center;
   }

   th, td {
     text-align: left;
     padding: 8px;
  }

  tr:nth-child(even) {background-color: #f2f2f2;}

  th {
    background-color: #04AA6D;
    color: white;
  }
 </style>
 </head>
 <body>
   <div class="table-data" id="makepdf">
   <h2>Display Data using Node.js & MySQL</h2>
   <button id="button" onclick="window.print();">Generate PDF</button>
   <table>
    <tr>
        <th>Date</th>
        <th>Description</th>
        <th>Debit</th>
        <th>Credit</th>
    </tr>
    
    <%
    if(userData.length!=0){
    var i=1;
    userData.forEach(function(data){
    %>
    <tr>
        <td><%=data.date %></td>
        <td><%=data.description %></td>
        <td><%=data.debit %></td>
        <td><%=data.credit %></td>
    </tr>
    
    <%  i++; }) %>
    <% } else{ %>
        <tr>
            <td colspan="7">No Data Found</td>
        </tr>
    <% } %>
   </table>
   </div>
</body>
</html>