すべてのページ（wkhtmltopdf）に折り目を挿入します。

私はwkhtmltopdf 0.12.2.1を使用して請求書を作成しています。すべてのページ（wkhtmltopdf）に折り目を挿入します。

私は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

出典

2016-02-08 csy_dot_io

ダウンとクローズアップの代わりになぜ私の質問を改善できるのか教えてください。 –

人々がそれをするとき、私はそれが嫌いです。 – ketchupisred

私はあなたがdownvotedを得た理由を知りませんが、ここでjavascriptがどこでプレーするのかを示すことができますか？私は 'wkhtmltopdf'に慣れていません。 – Pogrindis

わかりのように、基本的に見え、これがために（インターネット上の理由の例の不足のため....これを考え出すに日かかった

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の私のインスピレーションを見つけました。私は高さの要素を固定し、ページ上でそれを繰り返すために必要なていたので

これは、（あなたの.marksとしての私.wrapperニレ同じで、彼らは「相対的」要素だった）私のために働きました。このようにして、私はあなたのケースでは、.marksを閉じることによって新しいページをいつ開くかを決定することができました。

出典

2016-02-17 20:02:12

新しいページの開始時期はどうでしたか？私はそれを理解していませんでした。私の印は絶対的なもので、最初のページにしか置かれません。 –

動的要素の高さは150pxで、開発中に私は '.wrapper'要素を閉じる必要がある前にどれくらいページに置くことができるかを確認し、新しい' .wrapper'を開始しました。その後、データをページに配置し続けました。例：pageの高さは550pxです。各動的要素の高さは150pxです。 550/150 = 3,6に3を切り捨て、1つのページ/ .wrapper要素に配置する必要がある要素を多く知っています。だから3つの要素の後で私は。ラッパーを終了し、新しいものを開始しました。ラッパー要素（ '$ index％3 === 0？close + open：nothing'）。 –

'.wrapper'要素の高さは' page_height - footer_height-header_height'であるため、生成された各ページのヘッダーとフオーターの間に完全に合致します。 '.wrapper'要素に' page-break-after'を設定することを忘れないでください。 35％ - 50％ - 65％ –

すべてのページ（wkhtmltopdf）に折り目を挿入します。

答えて

関連する問題