问题描述
我正在尝试使用 Laravel 中的 DOM PDF 将 html 转换为 pdf。 PDF生成后，它在很多地方都显示了线条。生成的 PDF 显示图像中显示的额外行
我的 html 代码是这样的：-
<!doctype html>
<html lang="en">
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<Meta name="description" content="">
<Meta name="author" content="">
<title>Receipt</title>
</head>
<body class="">
<table style="width:95%; border: 0; padding: 10px ; margin: 0 auto">
<tbody>
<tr>
<td style="width: 100%; text-align: center; padding: 10px">
<img src="images/synoriq.svg">
</td>
</tr>
</tbody>
</table>
<table style="width:95%; border: 0; padding: 10px; margin: 0 auto; table-layout: fixed">
<tbody>
<tr>
<td style="width: 50%; vertical-align: text-top;">
<div class="" style="">
<h5 class="f13 font-weight-bold mb-0" style="font-size: 13px; font-weight: 700; margin-bottom: 0;"> Bill to:</h5>
<h5 class="f13 text-dark mb-1" style="color: #343a40!important; font-size: 13px; margin-bottom: .25rem!important;">Alok Trivedi</h5>
<div class="f13" style="font-size: 13px;">LN27394324932</div>
<div class="f13" style="font-size: 13px;">123,Model Town,Vaishali Nagar,</div>
<div class="f13" style="font-size: 13px;">Jaipur-(Rajasthan)</div>
<div class="f13" style="font-size: 13px;">Mobile: 9001166689</div>
<h5 class="f13 font-weight-bold mb-0 mt-16" style="font-size: 13px; font-weight: 700; margin-bottom: 0;"> GSTIN: </h5>
<div class="f13" style="font-size: 13px;">08AAZCS1364H</div>
</div>
</td>
<td style="width: 45%; vertical-align: text-top;">
<div class="" style="text-align: right; ">
<h5 class="f13 font-weight-bold mb-0" style="text-align:right;font-size: 13px; font-weight: 700; margin-bottom: 0;"> Payment Date: </h5>
<div class="f13" style="font-size: 13px;text-align:right;">12 October 2020,4:30 PM</div>
<h5 class="f13 font-weight-bold mb-0 mt-16" style="text-align:right;font-size: 13px; font-weight: 700; margin-top: 16px;"> Receipt Number: </h5>
<div class="f13" style="font-size: 13px;text-align:right;">WHFL20201210-12345</div>
</div>
</td>
</tr>
<tr>
<td colspan="2" style="width: 90%;padding-bottom: 10px; text-align: center;">
<table class="table" style="width: 650px;
margin: 10px auto;
color: rgba(0,1);
border-collapse: collapse;">
<thead style="background: #FFFFFF;
border: 1px solid rgba(0,0.16);
Box-sizing: border-Box;">
<tr>
<th class="f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0;">NO</th>
<th class="f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0;">DESCRIPTION</th>
<th class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right">HSN</th>
<th class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0;text-align: right">PRICE</th>
<th class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0;text-align: right">TAX RATE</th>
<th class="f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right">AMOUNT</th>
</tr>
</thead>
<tbody>
<tr>
<td class="f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: left;">1</td>
<td class=" f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; float: left;">EMI for September 2020</td>
<td class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right;">345</td>
<td class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right;">23,355.00</td>
<td class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right;">0%</td>
<td class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right;">23,355.00</td>
</tr>
<tr>
<td class="f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: left;">2</td>
<td class="left f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0;text-align: left;">Cash Collection Charges</td>
<td class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right;">345</td>
<td class="right f11"; style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right;">500.00</td>
<td class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right;">0%</td>
<td class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right;">590.00</td>
</tr>
<tr>
<td class="f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: left;">3</td>
<td class="left f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: left;">Late Payment Charges</td>
<td class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right;">345</td>
<td class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right;">1,000.00</td>
<td class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right;">0%</td>
<td class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right;">1,180.00</td>
</tr>
<tr>
<td class="f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: left;">4</td>
<td class="left f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: left;">Cheque Bouncing Charges</td>
<td class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right;"> 345</td>
<td class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right;">500.00</td>
<td class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right;">0%</td>
<td class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right;">590.00</td>
</tr>
<tr>
<td class="f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: left;" >5</td>
<td class="left f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: left;">Legal Charges</td>
<td class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right;">345</td>
<td class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right;">1,355.00</td>
<td class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right;">0%</td>
<td class="right f11" style="font-size: 11px; padding: .75rem;
vertical-align: top;
border-top: 0; text-align: right;">1,598.90</td>
</tr>
</tbody>
<tfoot>
<tr>
<td style="background-color:#EC1C24;border:1px solid #EC1C24;font-size: 11px; text-align: right;"></td>
<td style="background-color:#EC1C24;border:1px solid #EC1C24;text-align: left; font-size: 11px; font-weight: 700; color: #FFF;"> GRAND TOTAL</td>
<td colspan="4" style="background-color:#EC1C24;border:1px solid #EC1C24;text-align: right; font-weight: 700; font-size: 11px; color: #FFFFFF;">27,313.090</td>
</tr>
</tfoot>
</table>
</td>
</tr>
<tr>
<td style="width: 50%; vertical-align: top; border-top: 1px solid rgba(0,0.1); padding-top: 10px">
<div class="">
<h5 class="f11 font-weight-bold mb-0" style="font-size:11px; font-weight: 700px; margin-bottom: 0"> Payment received by:</h5>
<div class="f11" style="font-size:11px;"> Ashish Kumar (Sales) </div>
<div class="f11" style="font-size:11px;">9001166689</div>
<h5 class="f11 font-weight-bold mb-0 mt-16" style="font-size:11px; font-weight: 700px; margin-top: 16px"> Account with Branch:</h5>
<div class="f11">Branch Address Line 1,</div>
<div class="f11" style="font-size:11px;"> Branch Address Line 2,</div>
<div class="f11" style="font-size:11px;"> Landmark,</div>
<div class="f11" style="font-size:11px;"> City (State)</div>
<div class="f11" style="font-size:11px;"> 0141-4445678 </div>
<div class="f11" style="font-size:11px;">9001166689</div>
</div>
</td>
<td style="width: 50%; vertical-align: top; border-top: 1px solid rgba(0,0.1); padding-top: 10px">
<div class="" >
<h5 class="f11 font-weight-bold mb-0"> Payment made by: </h5>
<div class="f11" style="font-size:11px;">Primary Applicant Name</div>
<div class="f11" style="font-size:11px;" style="font-size:11px;">Primary Applicant Mobile Number</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%; vertical-align: top">
<div style="margin-top: 20px">
<div class="f11" style="font-size:11px;"> Synoriq R&D Private Limited </div>
<div class="f11" style="font-size:11px;" ><strong style="font-weight: 700; font-size: 11px"> Registered Office:</strong> 404,Mansarovar Plaza,</div>
<div class="f11" style="font-size:11px;"> Madhyam Marg,Mansarovar,Jaipur-302020</div>
<div class="f11" style="font-size:11px;"><strong style="font-weight: 700; font-size: 11px"> Tollfree: </strong> 1800-100-100 </div>
</div>
</td>
<td style="width: 50%; vertical-align:top">
<div style="border: 1px solid rgba(0,0.1); border-radius: 5px; padding: 10px; width: 300px">
<div style="width: 100%;
float: left;">
<p class="f11 mb-0 font-weight-bold" style="font-size: 11px margin-bottom: font-weight: 700;">Download Customer App</p>
<p class="f14 mb-0 bold" style="font-size: 14px margin-bottom: font-weight: 700;">synoriq.com/app</p>
<img src="images/image.svg" style="width: 100px; margin-top: 10px">
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>我的控制器功能有
$pdf = PDF::loadView('pdf',(array) $receipt);
return $pdf->download('pdfName.pdf');
首先，我使用的是外部 CSS，但它不起作用，所以我使用了内联 CSS。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）