web-dev-qa-db-ja.com

すべてにヘッダーとフッターを追加する方法PDF addHTMLメソッドを使用したjsPDFのページ

私はjspdfを使用してhtmlをpdfに変換しています。 addHTMLメソッドを使用してHTMLページをPDFに変換しています

  var htmlSource = $('#body')[0];

 function crate (){
   var pdf = new jsPDF('p','px');

  pdf.addHTML(
    htmlSource,10, 10, {pagesplit: true, margin: {top: 10, right: 10,bottom: 10, left: 10, useFor: 'page'}},
    function(dispose){
       pdf.save('datapdf.pdf');
    }
  );

}

すべてのページにヘッダーとフッターを追加したいのですが、ヘッダーとフッターのために空白を残します。しかし、オプションを使用すると、PDFの最初のページにのみヘッダースペースを残すことができます。

javascripthtmljspdf
8
Vijay ijardar

1つのアプローチは、クライアントブラウザーでhtmlページレンダリングを再充填して、pdfに印刷したいとおりに表示する（次に、先ほど作成した関数を使用する）ため、シリーズで構成される形式にすることです。 hだけを含むシリーズの代わりに、h、p1、f、h、p2、f、h、p3、fなどの垂直要素（h = header、p1 ... pnはページ、f = footer）の代わりに、 p1、p2、p3、...、pn、f（現状のまま）。

これは、htmlページのソースコードにアクセスできる可能性があることを意味します（したがって、インターネットから取得したページだけではありません）。これが外部リソースの場合、ヘッダーとフッターの寸法は、スペースも埋めるようにプログラムで構築されているためです。ページの他の要素との関係（ここでは、フレックス、垂直に適用、またはWebページのレンダリングにおけるグリッドテクノロジーについて考えています）。

この方法を実行する場合の別の側面は、コンテンツの分割が常に可能であるとは限らないことです（そして、スクロールを使用している場合にのみ表示されるテーブルやその他のマルチページ要素の破棄についてはここでは考えていません）。ページから要素を再描画するために、ページの垂直表示（デスクトップのように横向きモードとは反対）を考慮する場合があります。これにより、フッターとヘッダーが大きくなることがあります。そのため、最終的な印刷ページの貴重な部分の一部を使用する理由がわかりません。 （解決策は、新しいウィンドウを開いて新しい形式でページを再レンダリングすることです。既存のページの背後にある場合もあるでしょう。次に、該当するページを閉じる前に、印刷確認を起動するか、ファイルをダウンロードします。）

もう1つの方法は、ページの仮想レンダリング（ページが表示されない）で機能するように関数を変更することです-レンダリング自体ではなく関数に変更を加えることによって。

ただし、この2番目のアプローチにもいくつかの課題があります。最初に、変数 'var pdf'を宣言すると、これは一意のデータストレージコンテナーとして作成され、次にコンストラクター（var pdf = new jsPDF（ 'p'、 'px'）;）に割り当てます。ただし、次のステップでは、複数のエンティティではなく単一の要素であるHTMLコンテンツ（pdf.addHTML）を追加します。レンダリングされたページの次元に基づいて要素を最初に計算する配列を出力するようにするには、関数を変更する必要があります。

たぶんコードは次のようになるでしょう：

var fullpage, onepage, headd, foott, edges, contentt, he, fo, c, pages;
fullpage = document.body.scrollHeight; // height of all html page (not just the visible content)
onepage = 1200; // height of each single page printed in pdf - in pixels
headd = document.getElementById("header");
he =  headd.offsetHeight;
foott = document.getElementById("footer"); 
fo = foott.offsetHeight;
edges = he + fo;
contentt = onepage - edges; // height of content of each page printed

pages = [0];  // start to work with first page which obviously is there
fullpage -= onepage; // remove height of first printed page (containg both header and footer)
    pdf.addHTML( // create first page of pdf file
    htmlSource, 10, 10, {pagesplit: true, margin: {top: 10, right:
      10, bottom: 10, left: 10, useFor: 'page'}},
    function(dispose){
       pdf.save('datapdf.pdf');
    });   // this is your code

var i = 0; // start the counter

 while(fullpage > 0) { // start adding header + footer to remaining pages
  fullpage += edges; // if there is still a page 2...n we add edges, etc.
  i++;
  pages[i] = content(onepage) { // here you must insert the code for harvesting the n-st page content from your source code
    return htmlSource;
  }
     function addPages(i) {
         var eachpdf = "datapdf" + i + ".pdf";
          // <= here goes again your code, with a small change
          // pagesplit: false - instead of true, in order to speed the process, and also
          // pdf.save(eachpdf); - instead of pdf.save('datapdf.pdf');              
     }
 }

あなたが達成しようとしているのは、彼、p1、fo、he、p2、fo、he、p3、foなどのシリーズを作成することです（ここでhe = header、p1 ... pnは、ページ/上記の名前のdatapdfi /およびfoです） = footer）h、p1、p2、p3、...、pn、fのみを含むシリーズの代わり。

つまり、上記のコードで説明したように、個別のPDFページを含む配列を作成する必要があります。

各ページのコンテンツ（htmlSourceを返す可能性がある）を分離するためのコードはまだ作成していませんが、これはページのレンダリング方法に厳密に依存しています。

5
1copyright

HTMLの要素を使用する方法が提案されています<header>および<footer>その目的のために、例えば：

<footer>
    <div style='text-align:center;'>Page <span class="pageCounter"></span>/<span class="totalPages"></span></div>
</footer>

参照 https://github.com/MrRio/jsPDF/pull/26

4
Sajeetharan