'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>
mysqlnode.jspdf


Solution 1:[1]

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>

Solution 2:[2]

You can use inbuilt print window dialogue box where user can choose print in whatever size they want

It can be done by using an onclick function with your pdfgenertaor button

<button id="button" onclick="window.print();">Generate PDF</button>

Let me know if it work or not

Solution 3:[3]

If you want a solution which works inside the browser, you can create the PDF-button metioned earlier (https://stackoverflow.com/a/71439381/16342675) and then use several CSS media-queries to design your page for printing.

Media queries are explained here: https://developer.mozilla.org/de/docs/Web/CSS/@media

For hiding the button you could write some CSS like:

@media print {
  #button {
    display: none;
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 K J
Solution 2 Akhilesh Kumar Mishra
Solution 3 dev01

Related Questions