使用wkhtmltopdf轉換html表格報告：
<!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>
我知道這裡有很多程式碼，但未對齊的地方有幾行。它也不只在一行上——它是隨機的。當 html 放入瀏覽器時顯示正常，但它不會轉換為列印版本。 我該怎麼做才能糾正這個問題？謝謝
P粉6148403632024-03-31 11:06:56
添加更多行後，我可以重現該問題，這表明該問題確實相當難以預測。
但是，該問題似乎是由 border-collapse:collapse; css 屬性引起的。刪除它會使所有行具有相同的高度。
當然，這也會導致每個表格單元格周圍出現白色邊框，這可能是不想要的。
要讓邊框與單元格融為一體，解決方案是使用整個表格的背景圖案（而不是單一單元格的 background-color 屬性）為列著色。
在下面的程式碼中，我建立了一個內聯 svg 圖像，該圖像由三個具有表格列寬度和顏色的矩形組成：
為了在轉換過程中正確計算列寬，我需要將 dpi 設定調整為 130：
wkhtmltopdf --dpi 130 input.html output.pdf
HTML 程式碼：
| 01/15/2023 |
Payment Ledger |
11:23AM |
| Payment Date | Payment For | |
| 01/23/2023 | PAYMENT ON ACCOUNT | |
| 01/23/2023 | PAYMENT ON ACCOUNT |
產生的 pdf 檔：