Footer HTML pada halaman terakhir yang dicetak

Saya ingin mencetak halaman html saya. Saya memiliki lebih dari 1 halaman dan saya ingin mencetak footer saya hanya di bagian bawah halaman terakhir. Css saya

@page {
        size: 8.5in 11.0in;
        margin-left: 0.7cm;
        margin-top: 0.7cm;
        margin-top: 0.7cm;
        margin-bottom: 2.6cm;
        margin-right: 0.5cm
    }

#footer {
        clear: both;
        position: running(footer);
        z-index: 10;
        margin-top: -1em;
        vertical-align: bottom;
        height: 5%;
    }

 @page {
        @bottom-center {
            content: element(footer);
        }
    }

HTML:

<body><div id="content"></div>
       <div id="footer"></div>
<body>

Ini berfungsi, tetapi ketika saya memiliki tabel yang sangat besar di akhir konten saya, misalnya tabel 6 halaman, footer saya terisi untuk semua halaman dengan tabel.


html css pdf-generation
person Andrey Braslavskiy    schedule 12.12.2014    source sumber

Jawaban (2)


arrow_upward
1
arrow_downward

ASK: Kode CSS di bawah ini akan menampilkan footer atau konten apa pun hanya di halaman terakhir PDF.

<style type="text/css" media="print">    
    @page {    
        size: A4 portrait;    
        padding-left: 8px;    
        padding-right: 0px;
        margin-top: 50px;
        margin-bottom: 150px;
    
        @bottom-center {width: 100%; content: element(footer)}
    }  
    
    @media print {
        .footer {
            left: 0;
            width: 100%;
            position: running(footer);
            height: 200px;
        }  
    }
</style>



<div class="footer">
    Content Here
</div>
person Rohit Soni    schedule 30.07.2021

arrow_upward
-3
arrow_downward

Untuk membuatnya lebih sederhana, Anda dapat menempatkan footer dalam kueri media untuk dicetak dengan cara lain:

@media print { 
body {
  position: relative;
  }
#printfooter {
  position: absolute;
  bottom: 0;
  }
}

Sebagai saran penyelesaian cepat. Atau Anda menggunakan css3 dengan ekstensi @page:

@page:last {
    @bottom-center {
        content: element(footer);
    }
}

Untuk informasi lebih lanjut, w3 memiliki film dokumenter yang cukup bagus tentang Modul Media Halaman CSS. 5.3, Contoh 7 adalah informasi yang dapat Anda gunakan!

Semoga salah satu dari ini bisa membantu! Jika, atau jika tidak, tolong beri tahu saya.

Salam hormat, Marian.

person Marian Rick    schedule 12.12.2014
comment
Sayangnya tidak ada kelas semu :last untuk aturan @page. - person zutnop; 10.12.2017