請求書などを作成するために 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>
基本的にはこんな感じです画像
ベストアンサー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>
私はコードのインスピレーションを見つけましたここ。
これは私にとってはうまくいきました。なぜなら、高さが固定された要素があり、それをページ上で繰り返す必要があったからです (私の.wrapper
elm ではあなたのものと同じで.marks
、それらは「相対」要素でした)。このようにして、あなたのケースでは閉じることで新しいページをいつ「開く」かを判断できました.marks
。