Generating PDF from a HTML page

Question

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.

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>

Did you tried any of the solutions mentioned in this question - [Generate pdf from HTML in div using Javascript](https://stackoverflow.com/q/18191893/7482427) — Shivam, Mar 11 '22 at 14:32

score 1 · Answer 1 · answered Mar 11 '22 at 13:36

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

score 1 · Answer 2 · answered Mar 11 '22 at 14:22

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;
  }
}

score 0 · Accepted Answer · answered Mar 11 '22 at 19:25

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.

<!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>

Generating PDF from a HTML page

3 Answers3