在每页上插入折叠标记(wkhtmltopdf)
在每页上插入折叠标记(wkhtmltopdf)
提问于 2016-02-08 20:31:03
我使用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
回答 1
Stack Overflow用户
发布于 2021-04-20 17:04:53
旧线程，但我有一个完整的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文件中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35269749
复制相关文章
相似问题
腾讯云开发者
