Verwenden Sie wkhtmltopdf, um den HTML-Tabellenbericht zu konvertieren:
<!DOCTYPE html>
<html lang="en"></html>
<head>
<style type="text/css">
@font-face {
font-family: Plex;
src: url(/home/shawn/Development/Websites/MDSova/restapi/templates/fonts/IBMPlexSans-Regular.ttf);
}
@font-face {
font-family: Plex-Bold;
src: url(/home/shawn/Development/Websites/MDSova/restapi/templates/fonts/IBMPlexSans-SemiBold.ttf);
}
body {
font-family: Plex, Arial, Helvetica, sans-serif;
background-color: #FFF;
font-size: 18px;
}
h1,
h2,
h3 {
margin: 0;
padding: 0;
}
.report-data-table,
.report-title-table {
width: 100%;
border-collapse: collapse;
}
.report-title-table {
line-height: 36px;
}
.report-title-left,
.title-right {
width: 15%;
}
.report-title-center {
width: 70%;
text-align: center;
}
.report-title-right {
text-align: right;
}
.report-date-header,
.report-date-col {
width: 10%;
background-color: chocolate;
}
.report-for-header,
.report-for-col {
width: 14%;
background-color: palegreen
}
.test {
width: 78%;
background-color: forestgreen;
}
.report-date-header,
.report-for-header,
.report-source-header,
.report-sourcename-header,
.report-account-header,
.report-method-header,
.report-reference-header,
.report-amount-header {
font-family: Plex-Bold;
border-bottom: 1px solid #333;
}
</style>
</head>
<body>
<table class="report-title-table">
<tr>
<td class="report-title-left">01/15/2023</td>
<td class="report-title-center">
<h1>Payment Ledger</h1>
</td>
<td class="report-title-right">11:23AM</td>
</tr>
</table>
<table class="report-data-table">
<tr>
<td class="report-date-header">Payment Date</td>
<td class="report-for-header">Payment For</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
</table>
</body>
Ich weiß, dass es hier viel Code gibt, aber es gibt ein paar Zeilen, die falsch ausgerichtet sind. Es steht auch nicht nur in einer Zeile, es ist zufällig. Wenn der HTML-Code in den Browser eingegeben wird, wird er einwandfrei angezeigt, aber nicht in eine Druckversion konvertiert. Was kann ich tun, um dieses Problem zu beheben? Danke
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
添加更多行后，我可以重现该问题，这表明该问题确实相当难以预测。
但是，该问题似乎是由
border-collapse:collapse;css 属性引起的。删除它会使所有行具有相同的高度。当然，这也会导致每个表格单元格周围出现白色边框，这可能是不希望的。
要使边框与单元格融为一体，解决方案是使用整个表格的背景图案（而不是单个单元格的
background-color属性）为列着色。在下面的代码中，我创建了一个内联 svg 图像，该图像由三个具有表格列宽度和颜色的矩形组成：
为了在转换过程中正确计算列宽，我需要将 dpi 设置调整为 130：
HTML 代码：
Payment Ledger
生成的 pdf 文件：