首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在每页上插入折叠标记(wkhtmltopdf)

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

Stack Overflow用户
提问于 2016-02-08 20:31:03
回答 1查看 2.2K关注 0票数 20

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

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

这是我的基本标记

代码语言: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

EN

回答 1

Stack Overflow用户

发布于 2021-04-20 17:04:53

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

代码语言:javascript
复制
<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文件中。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35269749

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档