[英]Dompdf table border issue when HTML code converted to pdf file
我正在使用 DOMPdf 庫將 HTML 代碼轉換為 PDF。 當我在瀏覽器中運行該文件時，我用 HTML 設計了表格，但當我實際生成 PDF 文件時，一個單元格缺少右側邊框，一個不應顯示邊框的單元格有邊框。
預期結果
我得到的實際結果。
這是我的代碼
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>PaySlip</title>
<style>
.custom-font {
font-weight: bold;
}
table.blueTable {
border: 1px solid #000000;
background-color: #ffffff;
width: 100%;
text-align: left;
border-collapse: collapse;
}
table.blueTable td,
table.blueTable th {
border: 1px solid #020202;
padding: 3px 2px;
}
table.blueTable tbody td {
font-size: 13px;
}
table.blueTable tr:nth-child(even) {
background: #ffffff;
}
table.blueTable thead {
background: #1c6ea4;
background: -moz-linear-gradient(top,
#5592bb 0%,
#327cad 66%,
#1c6ea4 100%);
background: -webkit-linear-gradient(top,
#5592bb 0%,
#327cad 66%,
#1c6ea4 100%);
background: linear-gradient(to bottom,
#5592bb 0%,
#327cad 66%,
#1c6ea4 100%);
border-bottom: 2px solid #444444;
}
table.blueTable thead th {
font-size: 15px;
font-weight: bold;
color: #ffffff;
border-left: 2px solid #d0e4f5;
}
table.blueTable tfoot td {
font-size: 14px;
}
table.blueTable tfoot .links {
text-align: right;
}
</style>
</head>
<body>
<table class="blueTable">
<thead>
<tr>
<th colspan="4" style="text-align: center">
Payslip for the Month of XYZ - 2019
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="custom-font">Name Of Employee</td>
<td>Placeholder</td>
<td class="custom-font">Payable Days</td>
<td>Placeholder</td>
</tr>
<tr>
<td class="custom-font">Employee Code</td>
<td>Placeholder</td>
<td class="custom-font">Paid Days</td>
<td>Placeholder</td>
</tr>
<tr>
<td class="custom-font">Designation</td>
<td>Placeholder</td>
<td class="custom-font">Joining Date</td>
<td>Placeholder</td>
</tr>
<tr>
<td class="custom-font">PAN No.</td>
<td>Placeholder</td>
<td class="custom-font">Date Of Birth</td>
<td>Placeholder</td>
</tr>
<tr>
<td class="custom-font">Aadhaar No.</td>
<td>Placeholder</td>
<td class="custom-font">Bank Name</td>
<td>Placeholder</td>
</tr>
<tr>
<td class="custom-font">PF No.</td>
<td>Placeholder</td>
<td class="custom-font">Bank Account No</td>
<td>Placeholder</td>
</tr>
<tr>
<td class="custom-font">UAN</td>
<td>Placeholder</td>
<td class="custom-font">Location</td>
<td>Placeholder</td>
</tr>
<!-- space -->
<tr style="border-right:">
<td style="border-right-style: hidden;"> </td>
<td style="border-right-style: hidden;"> </td>
<td style="border-right-style: hidden;"> </td>
<td> </td>
</tr>
<!-- Salary info -->
<tr style="text-align: center">
<th>Earnings</th>
<th>Amount[INR]</th>
<th>Deductions</th>
<th>Amount[INR]</th>
</tr>
<tr>
<td class="custom-font">Basic Salary</td>
<td></td>
<td class="custom-font">Provident Fund</td>
<td></td>
</tr>
<tr>
<td class="custom-font">House Rent Allowance</td>
<td class="custom-font"></td>
<td class="custom-font">Professional Tax</td>
<td></td>
</tr>
<tr>
<td class="custom-font">Conveyance Allowance</td>
<td></td>
<td class="custom-font">TDS</td>
<td></td>
</tr>
<tr>
<td class="custom-font">Medical Allowance</td>
<td></td>
<td rowspan="3"></td>
<td rowspan="3"></td>
</tr>
<tr>
<td class="custom-font">Mobile Allowance</td>
<td></td>
</tr>
<tr>
<td class="custom-font">Executive Allowance</td>
<td></td>
</tr>
<!-- space -->
<tr>
<td style="border-right-style: hidden;"> </td>
<td style="border-right-style: hidden;"> </td>
<td style="border-right-style: hidden;"> </td>
<td> </td>
</tr>
<!-- Totals -->
<tr>
<th>Total Earnings</th>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th colspan="4">Net Pay : - Rs. 00,000.00/-</th>
</tr>
<tr>
<th colspan="4">
Net Pay (In Words): - Rs. 0 Thousand 0 Hundred and 0 Only
</th>
</tr>
<!-- space -->
<tr style="border-bottom:hidden">
<td colspan="4" style="border-left-style: hidden;border-right-style: hidden;text-align: center">
"This is a computer generated statement and does not require any
signature or stamp."
</td>
</tr>
<!-- leave details -->
<tr>
<th class="custom-font" colspan="4" style="border-left-style:hidden;border-right-style:hidden">Leave Balance</th>
</tr>
<tr>
<td class="custom-font" colspan="2">Accumulated Leave (Opening Leaves)</td>
<td colspan="2">0</td>
</tr>
<tr>
<td class="custom-font" colspan="2">Leave Taken</td>
<td colspan="2">0</td>
</tr>
<tr>
<td class="custom-font" colspan="2">Leave Balance (Closing Leaves)</td>
<td colspan="2">0</td>
</tr>
</tbody>
</table>
</body>
</html>
這是 Dompdf 0.8.3 及更早版本的渲染問題。 問題的核心是表格單元格的呈現順序以及邊框折疊時用於呈現表格單元格邊框和背景的技術。
首先，與 Dompdf 中的所有內容一樣，較早的元素在文檔結構中的較晚元素之前呈現。 當一個單元格跨行時，它會在隨后幾行中的單元格之前呈現。 這很重要，因為 PDF 中對象的堆疊順序（后面的對象呈現在前面的對象之上）。
其次，單元格邊框由任意兩個相鄰單元格組內的單個單元格呈現。 對於水平相鄰的單元格，右側的單元格呈現左邊框。 對於垂直相鄰的單元格，底部的單元格呈現頂部邊框。
第三，單元格背景渲染到單元格邊緣，不考慮邊界。
現在，考慮到位於其他表格單元格右側的跨行單元格，請考慮這三個事實。 將呈現跨行單元格的左邊框。 下一行中的相鄰單元格將不會呈現邊框，並且任何背景都將呈現單元格的整個寬度。 因此，后面的單元格的背景將呈現在跨行單元格邊框的頂部。
您可以在以下示例中看到此問題（例如，在 Dompdf 0.8.3 中運行時）：
<head>
<title>Row-span overlap</title>
<style>
table {
border-collapse: collapse;
}
table td {
border: 1px solid red;
background-color: #0000ff66;
}
.rowspan {
border-left-width: 10px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>1</td>
<td rowspan="2">2</td>
</tr>
<tr>
<td>3</td>
</tr>
</tbody>
</table>
</html>
該問題將在 Dompdf 0.8.4 中解決。 解決該錯誤的主要更改是在邊框內渲染背景。
使用 dompdf 或 tcpd 將 html/css 代碼渲染為 pdf 時出錯
[英]Error when rendering html/css code to pdf with dompdf or tcpd
使用基本HTML標記時，DOMPDF PDF文件無法在Adobe中打開
[英]DOMPDF PDF file fails to open in Adobe when using basic HTML tags
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.