首页 前端知识 通过html和css实现打印分页控制

通过html和css实现打印分页控制

2024-03-15 10:03:37 前端知识 前端哥 498 748 我要收藏

需求

需要将每一条数据单独打印成一页,超过一页就为n页;不超过过一页,就为一页!!!

实现方法

我是通过page-break-before属性设置元素前的 page-breaking 行为。

auto默认值。如果必要则在元素前插入分页符。
always在元素前插入分页符。
avoid避免在元素前插入分页符。
left在元素之前足够的分页符,一直到一张空白的左页为止。
right在元素之前足够的分页符,一直到一张空白的右页为止。
inherit规定应该从父元素继承 page-break-before 属性的设置。

注意点

  1. 只能引用于position 值为 relative 或 static 的非浮动块级元素。

网页预览如下

打印预览如下

 

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打印分页</title>
    <style>
        @media print {
            /* 在需要分页的元素之前插入分页 */
            .page-break {
                page-break-before: always;
            }

            /* 在需要避免分页的元素之后禁止分页 */
            .avoid-page-break {
                page-break-after: avoid;
            }
        }
    </style>
</head>

<body>
    <h1>第一页</h1>
    <p>一是在不了有和人这中大为上个国我以要他时来用们生到作地于出就分对成会可主发年动同工也能下过子说产种面而方后多定行学法所民得经十三之进着等部度家电力里如水化高自二理起小物现实加量都两体制机当使点从业本去把性好应开它合还因由其些然前外天政四日那社义事平形相全表间样与关各重新线内数正心反你明看原又么利比或但质气第向道命此变条只没结解问意建月公无系军很情者最立代想已通并提直题党程展五果料象员革位入常文总次品式活设及管特件长求老头基资边流路级少图山统接知较将组见计别她手角期根论运农指几九区强放决西被干做必战先回则任取据处队南给色光门即保治北造百规热领七海口东导器压志世金增争济阶油思术极交受联什认六共权收证改清己美再采转更单风切打白教速花带安场身车例真务具万每目至达走积示议声报斗完类八离华名确才科张信马节话米整空元况今集温传土许步群广石记需段研界拉林律叫且究观越织装影算低持音众书布复容儿须际商非验连断深难近矿千周委素技备半办青省列习响约支般史感劳便团往酸历市克何除消构府称太准精值号率族维划选标写存候毛亲快效斯院查江型眼王按格养易置派层片始却专状育厂京识适属圆包火住调满县局照参红细引听该铁纪正规精类槽纪央忙绿调顺革隶树您市朗望铝析注项冰脸额康篇投顾架诗液纷裁嘴融浇故藏急锻模欢薄浆登锡滴袖阀鹰径届夏择罩综潜
    </p>

    <!-- 在这里插入分页 -->
    <div class="page-break"></div>

    <h1>第二页</h1>
    <p>一是在不了有和人这中大为上个国我以要他时来用们生到作地于出就分对成会可主发年动同工也能下过子说产种面而方后多定行学法所民得经十三之进着等部度家电力里如水化高自二理起小物现实加量都两体制机当使点从业本去把性好应开它合还因由其些然前外天政四日那社义事平形相全表间样与关各重新线内数正心反你明看原又么利比或但质气第向道命此变条只没结解问意建月公无系军很情者最立代想已通并提直题党程展五果料象员革位入常文总次品式活设及管特件长求老头基资边流路级少图山统接知较将组见计别她手角期根论运农指几九区强放决西被干做必战先回则任取据处队南给色光门即保治北造百规热领七海口东导器压志世金增争济阶油思术极交受联什认六共权收证改清己美再采转更单风切打白教速花带安场身车例真务具万每目至达走积示议声报斗完类八离华名确才科张信马节话米整空元况今集温传土许步群广石记需段研界拉林律叫且究观越织装影算低持音众书布复容儿须际商非验连断深难近矿千周委素技备半办青省列习响约支般史感劳便团往酸历市克何除消构府称太准精值号率族维划选标写存候毛亲快效斯院查江型眼王按格养易置派层片始却专状育厂京识适属圆包火住调满县局照参红细引听该铁纪正规精类槽纪央忙绿调顺革隶树您市朗望铝析注项冰脸额康篇投顾架诗液纷裁嘴融浇故藏急锻模欢薄浆登锡滴袖阀鹰径届夏择罩综潜
    </p>

    <div class="page-break"></div>

    <h1>第三页</h1>
    <p>一是在不了有和人这中大为上个国我以要他时来用们生到作地于出就分对成会可主发年动同工也能下过子说产种面而方后多定行学法所民得经十三之进着等部度家电力里如水化高自二理起小物现实加量都两体制机当使点从业本去把性好应开它合还因由其些然前外天政四日那社义事平形相全表间样与关各重新线内数正心反你明看原又么利比或但质气第向道命此变条只没结解问意建月公无系军很情者最立代想已通并提直题党程展五果料象员革位入常文总次品式活设及管特件长求老头基资边流路级少图山统接知较将组见计别她手角期根论运农指几九区强放决西被干做必战先回则任取据处队南给色光门即保治北造百规热领七海口东导器压志世金增争济阶油思术极交受联什认六共权收证改清己美再采转更单风切打白教速花带安场身车例真务具万每目至达走积示议声报斗完类八离华名确才科张信马节话米整空元况今集温传土许步群广石记需段研界拉林律叫且究观越织装影算低持音众书布复容儿须际商非验连断深难近矿千周委素技备半办青省列习响约支般史感劳便团往酸历市克何除消构府称太准精值号率族维划选标写存候毛亲快效斯院查江型眼王按格养易置派层片始却专状育厂京识适属圆包火住调满县局照参红细引听该铁纪正规精类槽纪央忙绿调顺革隶树您市朗望铝析注项冰脸额康篇投顾架诗液纷裁嘴融浇故藏急锻模欢薄浆登锡滴袖阀鹰径届夏择罩综潜
    </p>

    <!-- 在这里避免分页 -->
    <div class="avoid-page-break"></div>
    <h1>第四页</h1>
    <p>一是在不了有和人这中大为上个国我以要他时来用们生到作地于出就分对成会可主发年动同工也能下过子说产种面而方后多定行学法所民得经十三之进着等部度家电力里如水化高自二理起小物现实加量都两体制机当使点从业本去把性好应开它合还因由其些然前外天政四日那社义事平形相全表间样与关各重新线内数正心反你明看原又么利比或但质气第向道命此变条只没结解问意建月公无系军很情者最立代想已通并提直题党程展五果料象员革位入常文总次品式活设及管特件长求老头基资边流路级少图山统接知较将组见计别她手角期根论运农指几九区强放决西被干做必战先回则任取据处队南给色光门即保治北造百规热领七海口东导器压志世金增争济阶油思术极交受联什认六共权收证改清己美再采转更单风切打白教速花带安场身车例真务具万每目至达走积示议声报斗完类八离华名确才科张信马节话米整空元况今集温传土许步群广石记需段研界拉林律叫且究观越织装影算低持音众书布复容儿须际商非验连断深难近矿千周委素技备半办青省列习响约支般史感劳便团往酸历市克何除消构府称太准精值号率族维划选标写存候毛亲快效斯院查江型眼王按格养易置派层片始却专状育厂京识适属圆包火住调满县局照参红细引听该铁纪正规精类槽纪央忙绿调顺革隶树您市朗望铝析注项冰脸额康篇投顾架诗液纷裁嘴融浇故藏急锻模欢薄浆登锡滴袖阀鹰径届夏择罩综潜
    </p>
</body>

</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3803.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!