Javascript 在每页上插入折叠标记（wkhtmltopdf）_Javascript_Wkhtmltopdf

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

javascript

Javascript 在每页上插入折叠标记（wkhtmltopdf）,javascript,wkhtmltopdf,Javascript,Wkhtmltopdf,我正在使用wkhtmltopdf 0.12.2.1创建发票等等我需要在pdf中的每一页上显示折叠标记。如果内容大于一页，我如何在每个页面上用javascript重复它们这是我的基本标记 <!DOCTYPE html> <html> <head> <title>PDF Title</title> <meta http-equiv="Content-Type" content="text/html; chars

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


PDF标题
主题
....
....
....

看起来基本上是这样的

好吧，我花了好几天才弄明白。。。。因为互联网上缺少示例（用于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>

。。。
...
//一些静态的东西在互联网上的某个地方找到了它
变量PDF={
宽度：8.27，//英寸，210毫米
高度：11.65，//英寸，296mm
利润：{
顶部：1.97，左侧：0.34，
右：0.393700787，下：0.393700787
}
};
$（文档）.ready（函数（）{
//通过创建“shadow”元素获取页面大小
变量pageSize=$（''）
.css({
高度：PDF.height+'in'，宽度：PDF.width+'in'，
顶部：“-100%”，左侧：“-100%”，
位置：'绝对'，
})
.附于（“主体”）；
//设置调试元素
$（'.debug'）.html（pageSize.height（））；
//设置每页元素。标记到适当的高度
//别忘了在页眉和页脚高度上加减号
$（'.marks'）.height（pageSize.height（）-footerhight-headerHeight）；
//@TODO:duplicate.marks到创建页面的次数，并且！！maybe！！使用pageSize.height（）设置.marks的顶部
});

我找到了代码的灵感

这对我来说是可行的，因为我有固定高度的元素，需要在页面上重复它（在我的

.wrapper

elm中，与你的

.marks

相同，它们是“相对”元素）。通过这种方式，我可以通过关闭您的

.marks

来确定何时“打开”一个新页面。

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

使用DPI计算某些内容没有任何意义，因为无论DPI设置如何，

$（document）.height（）

将始终返回相同的值。此外，无论如何，该高度都没有正确返回；我尝试了“textblock，textblock，textblock”=4500像素，“textblock，image，textblock，image，textblock，image”=4560像素，尽管每个图像的高度都>500px。所以，这条路没有任何方向

我的工作解决方案：

生成HTML并生成PDF（无TOC）

使用命令行工具“pdfinfo”获取实际页数

再次生成HTML，但这一次，传递页数

在HTML中，执行以下操作（使其适应模板语言）：

$factor=100/$totalPages/=25，共4页
for（$pageNum=1；$pageNum旧线程，但我有一个完整的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);
}


//获取总高度
变量高度=document.body.clientHeight；
//在我的示例中，我使用twig生成HTML
//pageHeightInCm是所需的页面高度
//125是我在px中转换cm的值
var pageHeight={{pageHeight}}*125；
var pageQtt=数学楼层（（高度）/页面高度）；
var系数=100/pageQtt；
对于（var pageNum=0；pageNum

这样，我每页获得一个div。
每个div都有页面的高度和宽度。其他css内容被添加到.border
选择器上的一个单独的css文件中。
请告诉我为什么，而不是向下和关闭投票，这样我就可以改进我的问题。我讨厌人们这样做。我不知道为什么你会被向下投票，但你能在这里演示javascript在哪里发挥作用吗？我不是f熟悉wkhtmltopdf
。你可以在使用wkhtmltopdf生成pdf时执行javascript。我的想法是计算高度或页数，然后复制标记。你需要水平或垂直折线吗？你是如何发现新页面何时开始的？我不明白。我的标记也是posi因为动态元素的高度为150px，在开发过程中，我检查了在需要关闭.wrapper
元素并启动一个新的.wrapper
之前，我可以在页面上放置多少数据。然后我继续将数据放置到页面中。例如：页面每个页面的高度为550pxnamic元素的高度为150px.550/150=3,6次四舍五入为3，我知道在一个单独的页面/wrapper元素中要放置的元素很多。因此，在3个元素之后，我结束了.wrapper并开始了一个新的.wrapper元素（$index%3==0？关闭+打开：无
）。因为.wrapper
元素的高度为：页面高度-页脚高度-页眉高度