文本对齐：通过 DomPDF (Laravel) 生成 PDF 居中，向右偏移一点
Posted
技术标签:
【中文标题】文本对齐：通过 DomPDF (Laravel) 生成 PDF 居中，向右偏移一点【英文标题】：text-align: center on Generate PDF via DomPDF (Laravel) a little bit offset to the right 【发布时间】：2020-05-07 11:47:50 【问题描述】：我使用 laravel-dompdf 从视图中生成 pdf。除了 "text-align: center" CSS 之外，一切都很好。
它与中心对齐，但向右“偏移”了一点。
这是示例 PDF 输出
如您所见，“FOTO JAMINAN”、“as”、“no rek”和“FOTO PERIKATAN”文本稍微向右偏移。
这是风景
<html lang="en">
<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">
<style>
.table1
font-family: sans-serif;
color: #232323;
border-collapse: collapse;
.table1,
th,
td
border: 1px solid #999;
padding: 8px;
width: 300px;
.judul
text-align: center;
background-color: blue;
color: #ffffff;
</style>
</head>
<body>
<h2>Detail Data Lampiran Foto Jaminan BPKB dan Perikatan</h2>
<table style="width: 100%;">
<tr>
<td class="judul" colspan="2">FOTO JAMINAN</td>
</tr>
<tr>
<td colspan="2"><center> $datafotobpkb->atasNama </center></td>
</tr>
<tr>
<td colspan="2">
<center>
$datafotobpkb->noRekening
</center>
</td>
</tr>
<tr>
<td>
<center>
@if($datafotobpkb->pathJaminanAsli1 !== null)
<img src="url($datafotobpkb->pathJaminanAsli1)">
@endif
</center>
</td>
<td>
<center>
@if($datafotobpkb->pathJaminanAsli2 !== null)
<img src="url($datafotobpkb->pathJaminanAsli2)">
@endif
</center>
</td>
</tr>
<tr>
<td>
<center>
@if($datafotobpkb->pathJaminanAsli3 !== null)
<img src="url($datafotobpkb->pathJaminanAsli3)">
@endif
</center>
</td>
<td>
<center>
@if($datafotobpkb->pathJaminanAsli4 !== null)
<img src="url($datafotobpkb->pathJaminanAsli4)">
@endif
</center>
</td>
</tr>
<tr>
<td>
<center>
@if($datafotobpkb->pathJaminanAsli5 !== null)
<img src="url($datafotobpkb->pathJaminanAsli5)">
@endif
</center>
</td>
<td>
<center>
@if($datafotobpkb->pathJaminanAsli6 !== null)
<img src="url($datafotobpkb->pathJaminanAsli6)">
@endif
</center>
</td>
</tr>
<tr>
<td colspan="2" rowspan="3">
$datafotobpkb->rincianAgunan
</td>
</tr>
</table>
<table style="width: 100%;">
<tr>
<td colspan="2" class="judul">
<center>
FOTO PERIKATAN
</center>
</td>
</tr>
<tr>
<td>
<center>
@if($datafotobpkb->pathPerikatanAsli1 !== null)
<img src="url($datafotobpkb->pathPerikatanAsli1)">
@endif
</center>
</td>
<td>
<center>
@if($datafotobpkb->pathPerikatanAsli2 !== null)
<img src="url($datafotobpkb->pathPerikatanAsli2)">
@endif
</center>
</td>
</tr>
<tr>
<td>
<center>
@if($datafotobpkb->pathPerikatanAsli3 !== null)
<img src="url($datafotobpkb->pathPerikatanAsli3)">
@endif
</center>
</td>
<td>
<center>
@if($datafotobpkb->pathPerikatanAsli4 !== null)
<img src="url($datafotobpkb->pathPerikatanAsli4)">
@endif
</center>
</td>
</tr>
<tr>
<td colspan="2">
$datafotobpkb->atasNama
</td>
</tr>
<tr>
<td colspan="2">
$datafotobpkb->noRekening
</td>
</tr>
<tr>
<td colspan="2">
Pokok Hutang: $datafotobpkb->pokokHutang / Jangka Waktu : $datafotobpkb->jangkaWaktu / Jasa :
$datafotobpkb->jasa
</td>
</tr>
<tr>
<td colspan="2">
Tanggal Perikatan: $datafotobpkb->tglPerikatan
</td>
</tr>
</table>
</div>
</body>
</html>
这是控制器功能
public function cetak_pdf($id)
$datafotobpkb = Datafotobpkb::find($id);
if($datafotobpkb === null)
abort(404);
$this->check_priviledge($datafotobpkb);
$pdf = PDF::loadview('datafotobpkb.datafotobpkb_pdf',['datafotobpkb'=>$datafotobpkb]);
// return $pdf->download('datafotobpkb-'.date('Y-m-d-h-i').'.pdf');
return $pdf->stream('datafotobpkb-'.date('Y-m-d-h-i').'.pdf');
知道如何解决这个问题吗？提前致谢。
【问题讨论】：
尝试添加display:block或尝试直接在TD上使用style
嗯仍然无法正常工作，我认为问题出在 DomPDF 上，因为当我在控制器上返回视图时，它工作正常。
你试过align="center"吗？最后的机会是使用<p> 像<p style="text-align: center">Hello world</p>
还是不行，想着用别的库。
使用TCPDF 效果很好。
【参考方案1】：
我今天遇到了同样的问题。我通过将版本从“barryvdh/laravel-dompdf”：“^0.8.4”更新为“barryvdh/laravel-dompdf”：“^0.8.5”来解决。
【讨论】：
在我的例子中，这很简单：一个表格，其中一些 tds 是集中的，而其他的不是集中的，一个 div（标题）也不是集中的，是的。更新后一切正常。【参考方案2】：如果您仍想使用相同的库 Barryvdh\DomPDF\Facade::class，有两种选择。经过测试并运行良好
对于居中对齐、显示块解决方案
<p style="display: block; margin-left: auto; margin-right: auto; font-size: 16px; text-align: center;">
...
</p>
使用浮动
<div>
<div style="float:left; font-size: 20px; font-weight: bold">
...
</div>
<div style="float:right; font-size: 20px; font-weight: bold">
...
</div>
</div>
【讨论】：
以上是关于文本对齐：通过 DomPDF (Laravel) 生成 PDF 居中，向右偏移一点的主要内容，如果未能解决你的问题，请参考以下文章
laravel中使用的PDF扩展包——laravel-dompdf和laravel-snappy
Dompdf-Laravel Unicode 字符无法正确呈现