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

【问题标题】：Insert folding marks on every page (wkhtmltopdf)在每一页上插入折叠标记 (wkhtmltopdf)
【发布时间】：2016-02-08 12:31:03
【问题描述】：

我正在使用 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

【问题讨论】：

不要直接投票，而是告诉我为什么，这样我才能改进我的问题。
我讨厌人们这样做。
我不知道你为什么被否决了，但你能证明javascript在这里发挥作用吗？我不熟悉wkhtmltopdf。
您可以在使用 wkhtmltopdf 生成 pdf 的同时执行 javascript。我的想法是计算高度或页数，然后复制标记。
需要水平折线还是垂直折线？

标签： javascript wkhtmltopdf

【解决方案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 来确定何时“打开”新页面。

【讨论】：

您是如何知道新页面何时开始的？我不明白。我的标记也是绝对定位的，并且只在第一页上。
因为动态元素的高度为 150 像素，并且在开发中，我在需要关闭 .wrapper 元素并开始新的 .wrapper 之前检查我可以在页面上放置多少。然后我继续将数据放入页面。示例：页面的高度为 550 像素，每个动态元素的高度为 150 像素。 550 / 150 = 3,6 次四舍五入到 3，我知道我必须在一个单页/.wrapper 元素中放置很多元素。所以在 3 个元素之后，我结束了 .wrapper 并开始了一个新的 .wrapper 元素 ($index % 3 === 0 ? close + open : nothing)。
因为.wrapper 元素的高度为：page_height - footer_height - header_height，从技术上讲，它在生成的每个页面的页眉和页脚之间完美契合。虽然不要忘记在.wrapper 元素上设置page-break-after。在 wrapper 元素中将您的标记作为“绝对”元素放置，并将它们放置为：35% - 50% - 65%
好吧，玩了很多，我想我会实现我需要的。你的回答是一个好的开始！谢谢。
页面是全高（包装元素）吗？通过在包装元素上添加边框来检查它。

【解决方案2】：

我知道这个帖子很旧，但我也遇到了同样的问题，也花了很多时间在上面。基本问题是 wkhtml 在渲染之前根本不知道将产生的页面数。这就是为什么只有页眉/页脚才能获得该信息的原因。

使用 DPI 进行计算没有任何意义，因为无论 DPI 设置如何，$(document).height() 将始终返回相同的值。此外，无论如何，这个高度都没有正确返回；我尝试使用“textblock，textblock，textblock”= 4500 px，“textblock，image，textblock，image，textblock，image”= 4560 px，尽管每个图像的高度 > 500px。所以，这条路无路可走。

我的工作解决方案：

生成 HTML 并生成 PDF（没有 TOC）。
使用命令行工具“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。

【讨论】：

【解决方案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 文件中。

【讨论】：