微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript-打印:如何在每个页面的页脚都贴到底部?

我正在尝试将生成HTML文档打印为PDF.该文档本身可以容纳多个页面.每个页面都是这样构建的:

<!-- Header -->

<!-- Content -->

<!-- Footer -->

所有这三个页面看起来都很不错.唯一的问题是页脚不会停留在底部…页脚将始终赶上页面的最后一个元素.只要页面上填充了足够的内容,页脚就会位于底部,就像您期望的那样.

这是我的CSS:

.docFooter{
    display: -webkit-Box;
    display: -ms-flexBox;
    display: flex;
    -webkit-Box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    bottom: 0;
    padding-right: 2cm;
    padding-bottom: 1cm;
}

我也尝试过生成像这样的单独的CSS:

@media print{
    .docFooter{
        display: -webkit-Box;
        display: -ms-flexBox;
        display: flex;
        -webkit-Box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        position: absolute;
        bottom: 0;
        padding-right: 2cm;
        padding-bottom: 1cm;
    }
}

当然,我正在使用这样的CSS:

<link rel="stylesheet" href="./main.min.css" media="all">

图片标题说明:

>我只需要Chrome支持,因为我正在开发电子框架
>我正在使用:https://github.com/delight-im/HTML-Sheets-of-Paper CSS文件使页面可见,就像将要打印给用户一样.
>逻辑是使用Node.js 7.5构建的

我做了一些研究,并尝试了这些问题的答案,但均未成功:

> Sticking custom footer on each page to bottom while printing
> make a div at the bottom of a specific page on printing
> How to use HTML to print header and footer on every printed page of a document?

那么用普通的CSS可以通过任何方式实现这一目标吗?如果没有,我还将建立一些逻辑以填充页脚上方的所有空白空间,直到页面达到其最大大小为止.

解决方法:

好的,出于某些奇怪的原因,该解决方案非常容易.
但是我从这里更改了CSS:

.docFooter{
    display: -webkit-Box;
    display: -ms-flexBox;
    display: flex;
    -webkit-Box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    bottom: 0;
    padding-right: 2cm;
    padding-bottom: 1cm;
}

对此:

display: -webkit-Box;
    display: -ms-flexBox;
    display: flex;
    -webkit-Box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    top: 27.7cm !important;
    padding-right: 2cm !important;

因为我知道A4页面不会超过29.7厘米,所以很容易将元素设置到底部,同时使其绝对位置从上到下分别为:27.7厘米

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐