当 HTML 代码转换为 pdf 文件时 Dompdf 表格边框问题
[英]Dompdf table border issue when HTML code converted to pdf file
问题描述
I am using the DOMPdf library to convert HTML code to PDF.
我正在使用 DOMPdf 库将 HTML 代码转换为 PDF。 I have designed the table in HTML when I run the file in the browser which renders fine but when I actually generate the PDF file one cell has right side border missing and one cell which should not display the border has borders.当我在浏览器中运行该文件时，我用 HTML 设计了表格，但当我实际生成 PDF 文件时，一个单元格缺少右侧边框，一个不应显示边框的单元格有边框。
Expected result预期结果
Actual Result I Got.我得到的实际结果。
Here is my code这是我的代码
<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>
1 个解决方案
解决方案1
2 已采纳 2019-06-18 00:05:00
This is a rendering issue with Dompdf versions 0.8.3 and earlier.这是 Dompdf 0.8.3 及更早版本的渲染问题。 The core of the issue is the rendering order of the table cells in combination with the technique used to render table cell borders and backgrounds when the borders are collapsed.问题的核心是表格单元格的呈现顺序以及边框折叠时用于呈现表格单元格边框和背景的技术。
First, as with everything in Dompdf earlier elements are rendered before later elements in the document structure.首先，与 Dompdf 中的所有内容一样，较早的元素在文档结构中的较晚元素之前呈现。 When a cell spans rows it is rendered prior to cells in the following rows.当一个单元格跨行时，它会在随后几行中的单元格之前呈现。 This is important because of the stacking order of objects in the PDF (later objects are rendered above earlier ones).这很重要，因为 PDF 中对象的堆叠顺序（后面的对象呈现在前面的对象之上）。
Second, cell borders are rendered by a single cell within a grouping of any two adjacent cells.其次，单元格边框由任意两个相邻单元格组内的单个单元格呈现。 For horizontally adjacent cells the cell on the right renders the left border.对于水平相邻的单元格，右侧的单元格呈现左边框。 For vertically adjacent cells the cell on the bottom renders the top border.对于垂直相邻的单元格，底部的单元格呈现顶部边框。
Third, cell backgrounds are rendered to the edge of the cell without consideration of borders.第三，单元格背景渲染到单元格边缘，不考虑边界。
Now take these three facts into account in consideration of a row-spanned cell that is to the right of other table cells.现在，考虑到位于其他表格单元格右侧的跨行单元格，请考虑这三个事实。 The left border of the row-spanned cell will be rendered.将呈现跨行单元格的左边框。 The adjacent cells in the following row will not render a border, and any background is rendered the full width of the cell.下一行中的相邻单元格将不会呈现边框，并且任何背景都将呈现单元格的整个宽度。 Because of this the later cell's background will render over top of the border of the row-spanned cell.因此，后面的单元格的背景将呈现在跨行单元格边框的顶部。
You can see this issue in the following example (when run in, for example, Dompdf 0.8.3):您可以在以下示例中看到此问题（例如，在 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>
The issue will be addressed in Dompdf 0.8.4.该问题将在 Dompdf 0.8.4 中解决。 The primary change to address the bug was to render the background within the border.解决该错误的主要更改是在边框内渲染背景。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.