Question

我使用wkhtmltopdf 0.12.2.1来创建发票等等。

我需要在pdf的每个页面上显示折叠标记。如果内容大于1，我如何在每个页面上使用javascript重复它们？

这是我的基本标记

<!DOCTYPE html>
<html>
  <head>
    <title>PDF Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body id="pdf-page">
    <div class="marks">
      <div class="mark mark-top mark-left"></div>
      <div class="mark mark-top mark-right"></div>
      <div class="mark mark-middle mark-left"></div>
      <div class="mark mark-bottom mark-left"></div>
      <div class="mark mark-bottom mark-right"></div>
    </div>
    <div id="print-area">
      <div id="letter-head"></div>
      <div id="subject-line">Subject</div>
      <div id="document-content">
        ....
        ....
        ....
      </div>
    </div>
  </body>
</html>

它看起来基本上像Image

Answer 1

好的，由于互联网上缺少示例（用于PHP / HTML / Javascript），这花了我几天时间来解决这个问题。我们得到了以下步骤：

获取文档的DPI
将元素设置为实际页面大小（看不见）
创建包装器/页面元素（您的案例.marks）
确定页面内容是否需要多个页面才能适合

注意：我在没有测试的情况下这样做，你当然需要玩。

...

<div class="marks">
    <div class="mark mark-top mark-left"></div>
    <div class="mark mark-top mark-right"></div>
    <div class="mark mark-middle mark-left"></div>
    <div class="mark mark-bottom mark-left"></div>
    <div class="mark mark-bottom mark-right"></div>
</div>

...

<script>
    // some static stuff found it somewhere on the internet
    var PDF = {
        width: 8.27, // inches, 210mm
        height: 11.65, // inches, 296mm
        margins: {
            top: 1.97, left: 0.34,
            right: 0.393700787, bottom: 0.393700787
        }
    };

    $(document).ready(function() {
        // get page sizes by creating 'shadow' element
        var pageSize = $('<div></div>')
            .css({
                height: PDF.height +'in', width: PDF.width +'in',
                top: '-100%', left: '-100%',
                position: 'absolute',
            })
            .appendTo('body');

        // set debug element
        $('.debug').html(pageSize.height());

        // set every page elements .marks to proper height
        // dont forget the substract the header and footer height
        $('.marks').height(pageSize.height() - footerHeight - headerHeight);

        // @TODO: duplicate .marks to times a pages is created, and !!maybe!! set the top of .marks with pageSize.height()
    });
</script>

我找到了代码here的灵感。

这对我有用，因为我有固定的高度元素，需要在页面上重复它（在.wrapper elm中与.marks相同，它们是'相对'元素）。通过这种方式，我可以通过在您的案例中关闭.marks来确定何时“打开”新页面。

Answer 2

我知道这个线程很旧，但是我遇到了同样的问题，并且花了很多时间。基本问题是，wkhtml在呈现之前根本不知道将要生成的页面数。这就是为什么只有页眉/页脚才能获得该信息的原因。

使用DPI计算内容没有任何意义，因为$(document).height()将始终返回相同的值，而与DPI设置无关。而且，无论如何都不能正确地给这个高度。我尝试使用“文本块，文本块，文本块” = 4500 px，“文本块，图像，文本块，图像，文本块，图像” = 4560 px进行了测试，尽管每个图像的高度均大于500px。因此，这条路无路可走。

我的工作解决方案：

生成HTML并生成PDF（无目录）。
使用命令行工具“ pdfinfo”获取实际页数。
再次生成HTML，但这一次传递页面数。
在您的HTML中，执行以下操作（使其适应您的模板语言）：

$factor = 100 / $totalPages; // = 25，共4页

for ($pageNum = 1; $pageNum <= $totalPages; $pageNum++) { $html .= '<div style="position: absolute; top: ' . ($factor*$pageNum)-($factor/2) . '%"></div> }

您将获得4个DIV，它们的“顶部”属性分别为百分之25-12.5，50-12.5，75 - 12.5，100-12.5。
呈现PDF
最后要开心

我正在使用带有补丁qt的wkhtml 0.12.3。

Answer 3

旧线程，但我有完整的 JS 响应。它发生在要呈现的 html 文件的末尾。灵感来自以下 PhP 解决方案。

<script>
// get total Height
var height = document.body.clientHeight;
// in my exemple, I use twig to generate HTML
// pageHeightInCm is the wanted page Height
// 125 is the value I found to transform cm in px
var pageHeight = {{ pageHeightInCm }} * 125;
var pageQtt = Math.floor((height)/pageHeight) ;
var factor = 100 / pageQtt;
for (var pageNum = 0; pageNum < pageQtt; pageNum++) {
    var element = document.createElement("div");
    element.classList.add('borderer');
    element.style.position = "absolute";
    element.style.top = ((factor*pageNum)) + '%';
    element.style.height = factor + '%';
    element.style.width = '100%';
    var parentDiv = document.getElementById("wrapper").parentNode;
    var ref = document.getElementById("wrapper");
    parentDiv.insertBefore(element, ref);
}

这样，我每页获得一个 div。每个 div 都有页面高度和宽度。其他 css 内容添加到 .borderer 选择器上的单独 css 文件中。

在每个页面上插入折叠标记（wkhtmltopdf）

3 个答案: