ส่วนท้าย HTML ที่หน้าที่พิมพ์ครั้งสุดท้าย

ฉันต้องการพิมพ์หน้า html ของฉัน ฉันมีมากกว่า 1 หน้า และฉันต้องการพิมพ์ส่วนท้ายที่ด้านล่างของหน้าสุดท้ายเท่านั้น ซีเอสของฉัน

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

มันใช้งานได้ แต่เมื่อฉันมีตารางที่ใหญ่มากในตอนท้ายเนื้อหาของฉัน เช่น ตาราง 6 หน้า ส่วนท้ายของฉันก็จะแสดงสำหรับทุกหน้าที่มีตาราง


html css pdf-generation
person Andrey Braslavskiy    schedule 12.12.2014    source แหล่งที่มา

คำตอบ (2)


arrow_upward
1
arrow_downward

แก้ไขแล้ว: โค้ด CSS ด้านล่างจะแสดงส่วนท้ายหรือเนื้อหาใดๆ ในหน้าสุดท้ายของ 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

เพื่อให้ง่ายขึ้น คุณสามารถวางตำแหน่งส่วนท้ายภายในแบบสอบถามสื่อสำหรับการพิมพ์ด้วยวิธีอื่น:

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

เป็นข้อเสนอแนะในการแก้ไขอย่างรวดเร็ว หรือคุณใช้ css3 กับส่วนขยาย @page:

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

สำหรับข้อมูลเพิ่มเติม w3 มีสารคดีที่ดีเกี่ยวกับ CSS Paged Media Modules 5.3 ตัวอย่างที่ 7 เป็นข้อมูลที่ดีของคุณ!

หวังว่านี่จะช่วยได้! ถ้าหรือไม่ใช่กรุณาแจ้งด้วยนะครับ

ขอแสดงความนับถือแมเรียน

person Marian Rick    schedule 12.12.2014
comment
น่าเสียดายที่ไม่มีคลาสหลอก :last สำหรับกฎ @page - person zutnop; 10.12.2017