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，但页眉和表格等在左侧被截断。

控制器代码：

$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代码中设置视口大小。例如，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中上面创建的。距离是从文档的左上角（原点）开始测量的：

span.item1 { 位置：绝对; 上：1cm; 左：1cm; }

如上所述，在 div 标记中放置 span class =“item1”后，您可以在其中放置任何内容。我认为这些span标记是一种坐标系标记，可确保每一代wkhtmltopdf的输出一致。

WKHTMLTOPDF切断左边距

1 个答案: