我正在嘗試通過單擊“生成 PDF”按鈕生成僅包含頁面上表格的 PDF 檔案。我的問題是如何生成 PDF 檔案。在這里，我附上了我的網頁截圖。
我只需要將表格列印到生成的 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>
uj5u.com熱心網友回復：
如果您想要一個在瀏覽器中作業的解決方案，您可以創建前面提到的 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>
uj5u.com熱心網友回復：
您可以使用內置的列印視窗對話框，用戶可以在其中選擇他們想要的任何尺寸的列印
可以通過使用帶有 pdfgenertaor 按鈕的 onclick 功能來完成
<button id="button" onclick="window.print();">Generate PDF</button>
讓我知道它是否有效
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/441240.html