客户端浏览器/ ctrl + p

Question

这是我的HTML

 /* not working*/
        @page {

                    margin-bottom: 40px;
                    counter-increment: page;
                    content: "Page " counter(page) " of " counter(pages);

            @bottom-right  {
                border-top: 1px solid #000000;
                padding-right: 20px;
                font-size: 12px !important;

            }
            @bottom-left  {
                content: "Footer content goes here.";
                border-top: 1px solid #000000;
            }

            }

            div#printhead {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 2em;
                text-align: center;
                padding-bottom: 1em;
                border-bottom: 1px solid;
                margin-bottom: 10px;
            }

            div#printhead {
                display: block;
                clear: both;
                text-align: center;
            }

            div#docbody {
                margin-top: 3em;
                overflow: visible !important;
                overflow-wrap: break-word;
                page-break-after: auto;
                height: 50px;
            }

            body {
                display: flex;
                flex-direction: column;
                min-height: 100vh;
            }

            .footer {
                width: 100%;
                display: flex;
                margin-top: auto;
                justify-content: space-between;
                bottom: 0px;
                font-size: 12px;
                position: fixed;
            }

            .left {
                width: 15%;
            }

            .footer:after 

{
            counter-increment: page;
            content: counter(page);
            font-size: 12px;

        }

CSS

{{1}}

我在打印html时尝试添加页眉，页脚和页数。标题将与下一页的内容重叠，页脚相同。而且，我有一些信息需要放在标题的左上角，但它只显示在第一页。对于页数，它不起作用。它始终显示每个打印页面的第1页。

格式如下http://www.basoftware.com.my/wp-content/uploads/2016/01/yearly-purchase-1.png

解决此问题的任何解决方案？提前谢谢。

Answer 1

客户端浏览器/ ctrl + p

答案可能是不可能的。您可能正在查看w3 spec或quackit，它们显示了一种向边距框中添加内容，甚至具有页码的方法。虽然这很棒，但是如果您查看w3规范的顶部，则会看到以下令人失望的行：

W3C工作草案，2018年10月18日

据我所知，它不受任何支持。我的测试也支持此wiki page。

我看到一个骇客（有人在OP的评论中指出），有人说这样可以起作用：

#footer:after {
    position: fixed;
    bottom: 0in;
    counter-increment: page;
    content: "Page " counter(page);
}

虽然这几乎可行，但对我来说有两个问题。在铬/电子中，对于PDF gen来说，它实际上并没有“增加”，而是增加到1，因此我的页码没有增加，此外，如果内容的页边距为负数，它会在下一页上绘制，而不是在页边距上绘制。因此，我不确定无论如何如何都能在pdf中为固定项目分配空间。

您可能还看到过这样的内容：

@media print {
    #footer {
        display: block;
        position: running(header);
    }
    @page { @top-center { content: element(header, last-except) }}
}

尽管spec听起来较旧，但似乎也没有浏览器支持，但无论如何大概都不做：2014年5月13日W3C工作草案

服务器端

如果在创建PDF服务器端时有兴趣为铬配置此功能，则header and footer snippets支持铬。因此，如果您使用正确的工具，则可以访问该文件，例如在服务器上生成PDF。

Puppeteer是我为此找到的最佳选择。以下是使用node包为node.js编写的示例。

const puppeteer = require('puppeteer');

(async() => {
    // Launch browser, and open tab
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    // Load html, you can use anything you could put in a URL bar
    await page.goto('file:///C:/filepath/page.html');

    // Create pdf
    await page.pdf({
        path: 'output.pdf',
        format: 'A4',
        displayHeaderFooter: true,
        headerTemplate: '<div></div>',
        footerTemplate: 
            '<div style="font-size: 12px; width: 100%; text-align: center; font-style: italic; padding-bottom: 0.5in; font-family: serif;">'+
                'Page <span class="pageNumber"></span>'+
            '</div>',
        margin: {
            top: '0.5in',
            bottom: '1.5in',
            left: '1in',
            right: '1in',
        }
    });

    // Close browser, now that we're done
    await browser.close();
})();

请注意，重要的是您为页眉/页脚内容指定字体大小，因为对我而言，它似乎默认为1px之类的东西，而我几乎看不到任何东西，并且以为这只是我之前的怪异行添加了。

可能存在用于其他语言（C#）的非官方端口，显然您可以在node中编写命令行界面，或将其配置为接受Web请求以生成可以用任何语言调用的pdf。

如何将页眉和页脚以及页数添加到html可打印版本？

1 个答案:

客户端浏览器/ ctrl + p

服务器端