laravel-Snappy PDF DIV 使用 height:11in 大小不正确答案

【问题标题】：laravel-Snappy PDF DIVs incorrectly sized using height:11inlaravel-Snappy PDF DIV 使用 height:11in 大小不正确
【发布时间】：2015-10-24 02:49:26
【问题描述】：

我正在使用 Laravel-snappy 并尝试绝对定位 6 列，以便在每页上打印 3 列..

查看

...
    body {
        position: relative;
    }

.col1-1 {
        text-align: right;
        background-color: #00dd00;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 250px;
        height: 11in;
    }

    .col1-2 {
        text-align: right;
        position: absolute;
        background-color: #1c94c4;
        top: 0px;
        left: 270px;
        width: 250px;
        height: 11in;
    }

    .col1-3 {
        text-align: right;
        background-color: #46b8da;
        position: absolute;
        top: 0px;
        left: 540px;
        width: 250px;
        height: 11in;
    }

    .col2-1 {
        text-align: right;
        background-color: #dd0100;
        position: absolute;
        top: 11in;
        left: 0px;
        width: 250px;
        height: 11in;
    }

    .col2-2 {
        text-align: right;
        position: absolute;
        background-color: #c4770b;
        top: 11in;
        left: 270px;
        width: 250px;
        height: 11in;
    }

    .col2-3 {
        text-align: right;
        background-color: #da0073;
        position: absolute;
        top: 11in;
        left: 540px;
        width: 250px;
        height: 11in;
    }
</style>
</head>
<body>
<div class="col1-1"></div>
<div class="col1-2"></div>
<div class="col1-3"></div>
<div class="col2-1"></div>
<div class="col2-2"></div>
<div class="col2-3"></div>
....

控制器

return $pdf->stream('page.pdf');

        return view('page');

问题是列短了，所以第二行从第一页开始...

我将页面大小设置为字母

    'pdf' => array(
    'enabled' => true,
    'binary' => 'C:\wkhtmltopdf\bin\wkhtmltopdf',
    'timeout' => false,
    'options' => array('page-size'=>'letter'),

所以我不太确定下一步该做什么......

我觉得这是一个缩放问题？

如果我不使用 Snappy，而只是在屏幕上显示页面并将屏幕打印为 PDF，结果会好得多（只有几个像素），但我当然需要将页面返回为PDF。

【问题讨论】：

标签： php css laravel pdf

【解决方案1】：

Snappy 使用 wkhtmltopdf，后者又使用 Webkit 来呈现 HTML。（如果我的建议对您没有帮助，可能会帮助您找到更多信息，因为您的问题可能与 Snappy 无关。）

我认为您可以通过防止页面在列内中断来解决您的问题。为此，您可以在每个列上使用以下 CSS：

   .col{
    page-break-inside: avoid;
    }

您也可以尝试将 3 列包装在一个 div 中并将该 css 应用于包装 div。

您也可以在列上尝试page-break-after: avoid 或page-break-before: avoid，或者在列集之间创建一个空 div 并使用 `page-break-after: always' 对其进行样式设置。

【讨论】：

我在其他地方的建议中使用page-break-after: always 尝试了集合之间的空 div，但没有运气。我最终只使用了 Snappy 选项（我假设已传递给 wkhtmltopdf）并使用 'zoom'=>1.2 一切似乎都正确。虽然这只是一种解决方法......