仅在最后打印的页面中打印页脚以进行媒体打印 [英] Print footer only in last printed page for media print

查看:68
本文介绍了仅在最后打印的页面中打印页脚以进行媒体打印的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我需要打印多页并且页脚需要打印在最后一页底部.我已经为这样的页脚添加了 css

I need to print multiple pages and footer needs to be print in last page bottom. I have add css for footer like this

footer {
     display: block;
     width:100%;        
     position:absolute;
     left:0;
     bottom:0px;        
}

问题是页脚正在打印第一页,但我需要在最后一页.

Issue is footer is printing first page, but i need this on last page.

推荐答案

使用 media="print" as

<link rel="stylesheet" href="yourpath/footerstyle.css" media="print"/>

在 html 中嵌入样式

embed styles as in html

<style>
@media print {
   footer {
    display: block;
    width:100%;        
    position:absolute;
    left:0;
    bottom:0;        
   }
}
</style>

<style type="text/css" media="print">
    footer {
        display: block;
        width:100%;        
        position:absolute;
        left:0;
        bottom:0;         
    }
</style>

尝试将 body 相对定位,footer 绝对定位:

Try to position the body relative and the footer absolute:

<style type="text/css" media="print">
     body {
        position: relative;
     }
     footer {
        display: block;
        width:100%;        
        position:absolute;
        left:0;
        bottom:0;         
     }
</style>

或者你可以使用这样的东西:

or you could use something like this:

@page:last {
    @bottom-center {
        content: "…";
    }
}

CSS 3 分页媒体模块

编辑

<style type="text/css" media="print">
     body {
        position: relative;
        margin: 0;
     }
     .page-section {

        /* Specify physical size of page, margins may vary by browser */

        height: 10 in; /* or give size as per proper calculation of the height of all your pages after which you want footer */
        position: relative;
     }
     footer {
        display: block;
        width:100%;        
        position:absolute;
        left:0;
        bottom:0;         
     }
</style>

.page-section 添加到相关的 div/div,根据您希望 div 每页打印或直接添加到 body 标签.

add .page-section to relevant div / divs as per you want divs to print per page or directly add to body tag.

这篇关于仅在最后打印的页面中打印页脚以进行媒体打印的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆