时间戳

首页 > 解决方案 > pdf文件中的页码在php中创建wkhtmltopdf

html - pdf文件中的页码在php中创建wkhtmltopdf

问题描述

我需要使用带有页码的 wkhtmltopdf 从 php 创建 pdf 文件 我在 php 文件中使用表格，尝试了一些 javascript 代码，如果在页脚中设置，则仅在最后一页显示，如果在页眉中设置，则在第一页显示，没有得到页码如何使用

我的示例代码是：

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);
                });
        }
<table border="1"><thead><tr><th>Head 1</th><th>Head 2</th><th>Head 3</th><th>Head 4</th><th>Head 5</th></tr></thead><tbody>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td></tr></tbody></table>
<body onload="substitutePdfVariables()">
    <p>Page <span class="page"></span> of <span class="topage"></span></p>
</body>

标签： htmlpdfwkhtmltopdfpage-numbering

解决方案

为了使 JavaScript 页码起作用，它应该放在提供给wkhtmltopdf命令的页眉或页脚模板中，以便它在每个页面上重复。

从wkhtmltopdf 文档：

Headers and footers can also be supplied with HTML documents. As an example
one could specify `--header-html header.html`, and use the following content in
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>


As can be seen from the example, the arguments are sent to the header/footer
html documents in get fashion.

推荐阅读