html - WKHTMLTOPDF 从左边距截断文本

Question

我目前正在使用 WKHTMLTOPDF 通过我的 Laravel 应用程序生成 PDF。 PDF 模板使用 Bootstrap 3.3.6 .

我目前看到的是文本、字体、布局完美呈现，但文本从左边距被截断。

如果我删除对 Bootstrap CSS 的调用，它不会切断文本，但表格等不会正确对齐/布局。一定是 Bootstrap 中的某些东西导致了这个问题。

模板顶部

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<style>
body {
  width: auto !important; min-width: 100% !important;
  font-family: 'Lato';
}
.page-break {
  page-break-after: always;
}
</style>

行width: auto !important; min-width: 100% !important;使更多文本可见，但仍不完美(请参见下面第二页的屏幕截图):

任何包含在 <p> </p> 中的文本正确适合 PDF，但标题和表格等在左侧被截断。

Controller 代码:

$pdf = PDF::loadView('reports.view-full-audit-report', $data)
->setPaper('a4')
->setOrientation('portrait')
->setOption('encoding', 'utf-8');
return $pdf->download('auditReport.pdf');

有没有人遇到过这种情况？如果是这样，你是如何解决的？如果您需要更多代码示例，请告诉我。非常感谢。

Answer 1

我以前在 Frappé Framweork 和 ERPNext 上遇到过这种情况。 DocType(销售发票)的 HTML 呈现将出于神秘原因执行此操作。到目前为止，我找到了两个解决方法:1. 根据最终文档大小在 HTML 代码中设置视口(viewport)大小。例如，一个 8.5 x 11 Letter 大小的页面将是:

<style>
@media screen {
    .print-format {
        width: 21.59cm;
        min-height: 27.94cm;
        padding: 0.0cm;
    }
}
</style>

我认为您也可以使用英寸或其他可接受的测量值。您必须通过执行上述解决方案在 HTML 或 Jinja 模板上声明足够的视口(viewport)大小

1. 如果一切都失败了，我用以下样式和 HTML 解决了我的问题:

   <style>
       div.general{
           position: relative;
           top: 0.0cm; 
           /*left: 0.0cm; */
       }
       div.document_size{
           position: absolute;
           width: 21.59cm;
           height: 27.94cm; 
       }
   </style>
   <div class="general">
       <div class="document_size">
           <!-- YOUR HTML GOES HERE -->
       </div>
   </div>
   

2. 最后，要小心地在页面上定位您的元素，请使用带有已声明类样式的 span 标记，这样您就可以绝对地将其放置在 within 上面创建的 div。距离是从文档的左上角(原点)开始测量的:

   span.item1{ position:absolute； 顶部:1cm； 左:1cm； }

如上所示将 span class="item1" 放入 div 标签后，您可以在其中放置任何内容。我将这些 span 标签视为一种坐标系标记，可确保每一代 wkhtmltopdf 的输出一致。