在每一页上插入折叠标记 (wkhtmltopdf)

Question

我正在使用 wkhtmltopdf 0.12.2.1 创建发票等。

我需要在 pdf 的每一页上显示折叠标记。如果内容大于一个，如何在每个页面上用 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
将元素设置为实际页面大小（看不见）
创建 wrapper/page 元素（您的案例 .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 相同，它们是 'relative' 元素).通过这种方式，我可以通过在您的情况下关闭 .marks 来确定何时 'open' 新页面。

Answer 2

我知道这个帖子很旧，但我也遇到了同样的问题并且花了很多时间在上面。基本问题是 wkhtml 在呈现之前根本不知道将产生多少页。这就是为什么只有 header/footer 才能获得该信息。

用 DPI 计算一些东西没有任何意义，因为 $(document).height() 将始终 return 相同的值，无论 DPI 设置如何。此外，这个高度无论如何都没有正确返回；我尝试使用 "textblock, textblock, textblock" = 4500 px，"textblock, image, textblock, image, textblock, image" = 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 个具有 "top" 属性的 25-12.5、50-12.5、75 - 12.5、100-12.5 百分比的 DIV。
呈现 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)

Insert folding marks on every page (wkhtmltopdf)

javascript

wkhtmltopdf