63

私は電子請求システムを開発しています。私たちの機能の1つは、請求書のPDFを生成し、それらを郵送することです。請求書には複数のテンプレートがあり、後で作成する予定なので、HTMLテンプレートを使用して、HTMLドキュメントを生成し、それをPDFに変換することにしました。しかし、wkhtmltopdfで問題に直面しています。私が知る限り（解決策を見つけるために何日もGoogleを使用しています）、単純にHTMLをヘッダー/フッターとして使用し、ページ番号を表示することはできません。

バグレポート（またはそのようなもの）（http://code.google.com/p/wkhtmltopdf/issues/detail?id=140）で私はJavaScriptでこのコンボが達成可能であることを読みました。しかし、それを行う方法に関する他の情報は、このページや他の場所で見つけることができません。

もちろん、JavaScriptを強制的に使用することはそれほど重要ではありません。wkhtmltopdfでCSSの魔法が機能する場合は、他のハックなソリューションと同じように素晴らしいでしょう。

ありがとう！

4

8 に答える 8

89

実際には、コードスニペットを使用するよりもはるかに簡単です。コマンドラインに次の引数を追加できます--footer-center [page]/[topage]。

リチャードが述べたように、さらなる変数はドキュメントのフッターとヘッダーのセクションにあります。

于 2012-11-21T15:49:23.113 に答える
44

他のいくつかのパラメータの中で、ページ番号と合計ページ番号は、公式ドキュメントで概説されているように、クエリパラメータとしてフッターHTMLに渡されます。

... [ページ番号]引数は、GET形式でヘッダー/フッターのhtmlドキュメントに送信されます。

出典：http ：//wkhtmltopdf.org/usage/wkhtmltopdf.txt

したがって、解決策は、少しのJSを使用してこれらのパラメーターを取得し、それらをHTMLテンプレートにレンダリングすることです。フッターHTMLの完全な実例を次に示します。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script>
        function substitutePdfVariables() {

            function getParameterByName(name) {
                var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
                return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
            }

            function substitute(name) {
                var value = getParameterByName(name);
                var elements = document.getElementsByClassName(name);

                for (var i = 0; elements && i < elements.length; i++) {
                    elements[i].textContent = value;
                }
            }

            ['frompage', 'topage', 'page', 'webpage', 'section', 'subsection', 'subsubsection']
                .forEach(function(param) {
                    substitute(param);
                });
        }
    </script>
</head>
<body onload="substitutePdfVariables()">
    <p>Page <span class="page"></span> of <span class="topage"></span></p>
</body>
</html>

substitutePdfVariables()本体で呼び出されますonload。次に、サポートされている各変数をクエリ文字列から取得し、すべての要素のコンテンツを一致するクラス名に置き換えます。

于 2016-06-14T08:46:23.733 に答える
33

ページ番号と合計ページ数を表示するには、フッターまたはヘッダーコードで次のJavaScriptスニペットを使用できます。

  var pdfInfo = {};
  var x = document.location.search.substring(1).split('&');
  for (var i in x) { var z = x[i].split('=',2); pdfInfo[z[0]] = unescape(z[1]); }
  function getPdfInfo() {
    var page = pdfInfo.page || 1;
    var pageCount = pdfInfo.topage || 1;
    document.getElementById('pdfkit_page_current').textContent = page;
    document.getElementById('pdfkit_page_count').textContent = pageCount;
  }

そして、ページオンロードでgetPdfInfoを呼び出します

もちろん、pdfkit_page_currentとpdfkit_page_countは、数値を示す2つの要素になります。

ここから取ったスニペット

于 2011-08-24T11:47:58.813 に答える
24

wkhtmltopdfドキュメント（http://madalgo.au.dk/~jakobt/wkhtmltoxdoc/wkhtmltopdf-0.9.9-doc.html）の「フッターとヘッダー」という見出しの下に、ページ番号を付けるためのコードスニペットがあります。

<html><head><script>
function subst() {
  var vars={};
  var x=document.location.search.substring(1).split('&');
  for(var i in x) {var z=x[i].split('=',2);vars[z[0]] = unescape(z[1]);}
  var x=['frompage','topage','page','webpage','section','subsection','subsubsection'];
  for(var i in x) {
    var y = document.getElementsByClassName(x[i]);
    for(var j=0; j<y.length; ++j) y[j].textContent = vars[x[i]];
  }
}
</script></head><body style="border:0; margin: 0;" onload="subst()">
<table style="border-bottom: 1px solid black; width: 100%">
  <tr>
    <td class="section"></td>
    <td style="text-align:right">
      Page <span class="page"></span> of <span class="topage"></span>
    </td>
  </tr>
</table>
</body></html>

ヘッダー/フッターで使用するためにページ番号以外に置き換えることができる利用可能な変数もあります。

于 2012-10-25T09:17:45.703 に答える
2

XHTMLを使用している場合でも（たとえば、thymeleafで）安全なアプローチ。他のソリューションとの唯一の違いは、//タグの使用です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <script>
        /*<![CDATA[*/
        function subst() {
            var vars = {};
            var query_strings_from_url = document.location.search.substring(1).split('&');
            for (var query_string in query_strings_from_url) {
                if (query_strings_from_url.hasOwnProperty(query_string)) {
                    var temp_var = query_strings_from_url[query_string].split('=', 2);
                    vars[temp_var[0]] = decodeURI(temp_var[1]);
                }
            }
            var css_selector_classes = ['page', 'topage'];
            for (var css_class in css_selector_classes) {
                if (css_selector_classes.hasOwnProperty(css_class)) {
                    var element = document.getElementsByClassName(css_selector_classes[css_class]);
                    for (var j = 0; j < element.length; ++j) {
                        element[j].textContent = vars[css_selector_classes[css_class]];
                    }
                }
            }
        }
        /*]]>*/
    </script>
</head>
<body onload="subst()">
    <div class="page-counter">Page <span class="page"></span> of <span class="topage"></span></div>
</body>

最後の注意： thymeleafを使用している場合は、に置き換え<script>て<script th:inline="javascript">ください。

于 2018-01-26T11:28:02.147 に答える
2

私の例は、特定のページのテキストを非表示にする方法を示しています。この場合は、2ページ目以降のテキストが表示されます。

<span id='pageNumber'>{#pageNum}</span>
<span id='pageNumber2' style="float:right; font-size: 10pt; font-family: 'Myriad ProM', MyriadPro;"><strong>${siniestro.numeroReclamo}</strong></span>
<script>
    var elem = document.getElementById('pageNumber');
    document.getElementById("pageNumber").style.display = "none";
       if (parseInt(elem.innerHTML) <= 1) {
           elem.style.display = 'none';
           document.getElementById("pageNumber2").style.display = "none";
       }
</script>
于 2019-11-04T17:56:34.673 に答える
0

ドキュメントから直接wkhtmltopdf

0.12.6に更新。

フッターとヘッダー：
ヘッダーとフッターは、それぞれ--header-*引数と--footer*引数によってドキュメントに追加できます。--header-leftなどに提供されるヘッダーとフッターのテキスト文字列では、次の変数が置き換えられます。

  • [ページ]現在印刷されているページ数に置き換えられます
  • [frompage]最初に印刷されるページの番号に置き換えられます
  • [topage]最後に印刷されたページの番号に置き換えられます
  • [ウェブページ]印刷中のページのURLに置き換えられました
  • [セクション]現在のセクションの名前に置き換えられました
  • [サブセクション]現在のサブセクションの名前に置き換えられました
  • [日付]システムローカル形式の現在の日付に置き換えられました
  • [isodate]ISO8601拡張形式の現在の日付に置き換えられました
  • [時刻]システムローカル形式の現在時刻に置き換えられます
  • [タイトル]現在のページオブジェクトのタイトルに置き換えられました
  • [doctitle]出力ドキュメントのタイトルに置き換えられました
  • [サイトページ]変換中の現在のサイトのページ番号に置き換えられました
  • [サイトページ]現在のサイトで変換されているページ数に置き換えられました

--header-right "Page [page] of [topage]"を指定すると、「Page x of y」というテキストになります。ここで、xは現在のページの番号、yは最後のページの番号です。ドキュメントの左上隅に表示されます。

ヘッダーとフッターは、HTMLドキュメントで提供することもできます。例として、-header-html header.htmlを指定し、header.htmlで次のコンテンツを使用できます。

<!DOCTYPE html>   
<html>
  <head><script>
    function subst() {
      var vars = {};
      var query_strings_from_url = document.location.search.substring(1).split('&');
      for (var query_string in query_strings_from_url) {
        if (query_strings_from_url.hasOwnProperty(query_string)) {
          var temp_var = query_strings_from_url[query_string].split('=', 2);
          vars[temp_var[0]] = decodeURI(temp_var[1]);
        }
      }
      var css_selector_classes = ['page', 'frompage', 'topage', 'webpage', 'section', 'subsection', 'date', 'isodate', 'time', 'title', 'doctitle', 'sitepage', 'sitepages'];
      for (var css_class in css_selector_classes) {
        if (css_selector_classes.hasOwnProperty(css_class)) {
            var element = document.getElementsByClassName(css_selector_classes[css_class]);
            for (var j = 0; j < element.length; ++j) {
                element[j].textContent = vars[css_selector_classes[css_class]];
            }
        }
      }   
    }
  </script></head>
  <body style="border:0; margin: 0;" onload="subst()">   
    <table style="border-bottom: 1px solid black; width: 100%">
      <tr>
        <td class="section"></td>
        <td style="text-align:right">
          Page <span class="page"></span> of <span class="topage"></span>
        </td>
      </tr>   
    </table>
  </body>
</html>

ProTip

、、、、などの特定の情報を使用していない場合は、webpageそれらを削除する必要があります。かなり大きなPDFを生成しており、約1,000ページでセグメンテーション違反が発生していました。sectionsubsectionsubsubsection

徹底的な調査の結果、これらの未使用の変数を削除することになりました。いいえ、セグメンテーション違反を確認せずに7,000ページ以上のPDFを生成することはできません。

于 2021-02-25T13:01:59.183 に答える
-2

それを行うべき方法（つまり、wkhtmltopdfがサポートしている場合）は、適切なCSSページメディアを使用することです：http ：//www.w3.org/TR/css3-gcpm/

私はそれが今何をするかを調べています。

于 2014-01-23T23:55:45.770 に答える