个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 02:36:44 25 4
gpt4 key购买 nike

这是我的html

<body>
<div>
    <span>Information:</span><br><span>aaaaa</span>
    <div id="printhead">
        <p>
            This is the print page header
        </p>
    </div>
    </div>
    <div id="docbody" >
       <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
    </div>

    <div class="footer">
        <p class="left">this is a footer   Page </p>
        <p class="right"></p>
    </div>
</body>

CSS

 /* 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;

        }

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

格式看起来像这样http://www.basoftware.com.my/wp-content/uploads/2016/01/yearly-purchase-1.png

有解决这个问题的方法吗？提前致谢。

最佳答案

客户端浏览器/ctrl+p

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

W3C Working Draft, 18 October 2018

据我所知，它不受任何支持。我的测试支持那个以及这个 wiki page .

我看到了一个 hack(有人在 OP 的评论中指出)，有人说它看起来像这样:

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

虽然这几乎可以工作，但它对我来说有几个问题。在 chromium/electron 中，对于 PDF gen，它似乎实际上并没有“递增”，除了 1，所以我的页码没有增加，此外，如果内容有负边距，则似乎将其放入页边距，它将绘制在下一页上，而不是页边距上。所以我不确定我们如何能够在 pdf 中为固定元素分配空间。

你可能也见过这样的东西:

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

虽然这 spec 也没有浏览器支持听起来比较老，但大概还没有“完成”:W3C 工作草案，2014 年 5 月 13 日

服务器端

如果您有兴趣在创建 PDF 服务器端时为 chromium 配置此功能，可以使用 chromium 支持 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#)，显然您可以在节点中编写命令行界面，或将其配置为接受网络请求以生成可以用任何语言调用的 pdf。

关于html - 如何将页眉和页脚以及页数添加到 html 可打印版本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47378023/

25 4 0
文章推荐： javascript - 响应轮播大小到多少个单元格
文章推荐： javascript - 如何使用淡入/淡出更改 div 背景颜色？
文章推荐： c++ - 调用哈希类函数
文章推荐： javascript - 如何在 jQuery 中使用多个选择器
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com