从 HTML 页面生成 PDF

Question

我正在尝试通过单击“生成 PDF”按钮来生成仅包含页面上 table 的 PDF 文档 。我的问题是如何生成 PDF 文档。这里附上我的网页截图。

我只需要将 table 打印到生成的 pdf。

这是我的代码。

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

Answer 1

您可以使用内置打印 window 对话框，用户可以在其中选择他们想要的任何尺寸的打印

可以通过使用 pdfgenertaor 按钮的 onclick 函数来完成

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

让我知道它是否有效

Answer 2

如果你想要一个在浏览器内部工作的解决方案，你可以创建前面提到的 PDF-button () 然后使用几个 CSS media-queries 来设计您的打印页面。

媒体查询解释如下：https://developer.mozilla.org/de/docs/Web/CSS/@media

为了隐藏按钮，你可以写一些 CSS 比如：

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

Answer 3

只需结合前面的两个答案，调用“另存为 PDF”或其他用户选择的打印输出的页面按钮将不会显示在打印媒体中，如此处所示。

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

从 HTML 页面生成 PDF

Generating PDF from a HTML page

mysql

pdf

node.js