問題描述

我正在嘗試將生成的 HTML 文檔打印為 PDF.文檔本身可以包含多個頁面.每個頁面都是這樣構建的:

I'm trying to print a generated HTML document to PDF. The document itself can hold multiple pages. Every page is built up like this:

<!-- Header -->

<!-- Content -->

<!-- Footer -->

這三個在每一頁上看起來都很好.唯一的問題是頁腳不會粘在底部......頁腳將始終趕上頁面的最后一個元素.只要頁面填充了足夠的內容，頁腳就會像您期望的那樣位于底部.

All three look fine on every page. The only problem is that the footer won't stick at the bottom... The footer will always catch up with the last element of the page. As long as the page is filled with enough content the footer will be at the bottom as you would expect it to be.

這是我的 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:

I've also tried to generate a separate CSS like this:

@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:

And of course I'm using the CSS like this:

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

旁注:

• 我只需要 Chrome 支持，因為我正在使用 electron 框架
進行開發
• 我正在使用這個:https://github.com/delight-im/HTML-Sheets-of-Paper CSS 文件使頁面可見，就像它們將要打印給用戶一樣.
• Logic 使用 Node.js 7.5 構建

• I just need Chrome support, since I'm developing with the electron framework
• I'm using this: https://github.com/delight-im/HTML-Sheets-of-Paper CSS files to make pages visible like they are going to be printed to the user.
• Logic is built with Node.js 7.5

我做了一些研究并嘗試了這些問題的答案，但沒有成功:

I did some research and tried out the answers from these questions with no success:

• 將自定義頁腳粘貼到每頁底部同時打印
• 在打印時特定頁面的底部
• 如何使用 HTML 在文檔的每個打印頁面上打印頁眉和頁腳?

那么有沒有可能用純 CSS 來實現呢?如果沒有，我還會構建一些邏輯來填充頁腳上方的所有空白空間，直到頁面達到其最大尺寸.

推薦答案

好的，由于某些奇怪的原因，解決方案非常簡單.但是我已經改變了我的 CSS:

Ok, the solution was super easy for some strange reason. However I've changed my CSS from this:

.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.7cm，所以很容易將元素設置到底部，同時使用 top: 27.7cm

Since I know that a A4 page won't exceed 29.7cm it was easy to set the element to the bottom while making it absolute positioned coming from top with top: 27.7cm

這篇關于打印:如何將每頁的頁腳粘貼到底部?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！