WKHTMLTOPDF 从左边距截断文本答案

【问题标题】：WKHTMLTOPDF cutting off text from left marginWKHTMLTOPDF 从左边距截断文本
【发布时间】：2016-07-08 13:30:45
【问题描述】：

我目前正在使用 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，但标题和表格等在左侧被截断。

控制器代码：

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

以前有人经历过吗？如果是这样，您是如何解决的？如果您需要更多代码示例，请告诉我。非常感谢。

【问题讨论】：

标签： html twitter-bootstrap laravel pdf wkhtmltopdf

【解决方案1】：

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

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

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

如果一切都失败了，我可以使用以下样式和 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>

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

跨度.item1{ 位置：绝对；顶部：1cm；左：1cm； }

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

【讨论】：