• CSS控制打印 分页


    代码:

    /* from: http://hi.baidu.com/nomady/blog/item/00da853d54ed1a01baa16734.html */

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>每页都有的表头</title>
    </head>

    <body>
    <mce:style><!--
         @media print{INPUT {display:none}}
    --></mce:style><style mce_bogus="1">     @media print{INPUT {display:none}}</style>
    <TABLE border="0" style="font-size:9pt;" mce_style="font-size:9pt;" width="300px" align="center">
    <THEAD style="display:table-header-group;font-weight:bold" mce_style="display:table-header-group;font-weight:bold">
    <TR><TD colspan="2" align="center" style="font-weight:bold;border:3px double red" mce_style="font-weight:bold;border:3px double red">每页都有的表头</TD></TR>
    </THEAD>
    <TBODY style="text-align:center" mce_style="text-align:center"">
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR style="page-break-after:always;" mce_style="page-break-after:always;"><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR style="page-break-after:always;" mce_style="page-break-after:always;"><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR><TD>表格内容</TD><TD>表格内容</TD></TR>
    <TR style="page-break-after:always;" mce_style="page-break-after:always;"><TD>表格内容</TD><TD>表格内容</TD></TR>
    </TBODY>
    <TFOOT style="display:table-footer-group;font-weight:bold" mce_style="display:table-footer-group;font-weight:bold">
    <TR>
    <TD colspan="2" align="center" style="font-weight:bold;border:3px double blue" mce_style="font-weight:bold;border:3px double blue">每页都有的表尾</TD>
    </TR>
    </TFOOT>
    </TABLE>
    <input type=button value=" 打    印 " onclick="window.print()">


    </body>

    </html>

    关于page-break-after

    语法:
    page-break-after : auto | always | avoid | left | right | null
    取值:

    auto :  假如需要在对象之后插入页分割符
    always :  始终在对象之后插入页分割符
    avoid :  未支持。避免在对象后面插入页分割符
    left :  未支持。在对象后面插入页分割符直到它到达一个空白的左页边
    right :  未支持。在对象后面插入页分割符直到它到达一个空白的右页边
    null :  空白字符串。取消页分割符设置

    说明:
    检索或设置对象后出现的页分割符。
    此属性在打印文档时发生作用。此属性不作用于 BR HR 对象。
    假如在浏览器已显示的对象上此属性和 page-break-before 属性的值之间发生冲突,则导致最大数目分页的值被使用。
    页分隔符不允许出现在定位对象内部。
    在IE6及之前版本浏览器中, left right 值的作用结果等同于 always
    此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
    对应的脚本特性为 pageBreakAfter
    此外还有page-break-before和page-break-inside
  • 相关阅读:
    SpringBoot 配置提示功能
    【源码解析】凭什么?spring boot 一个 jar 就能开发 web 项目
    【源码解析】自动配置的这些细节都不知道,别说你会 springboot
    validator 自动化校验
    【spring-boot 源码解析】spring-boot 依赖管理梳理图
    js防抖节流
    koa2怎么自定义一个中间件
    nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案
    vue中兄弟之间组件通信
    js中css样式兼容各个浏览器写法
  • 原文地址:https://www.cnblogs.com/kofkyo/p/2297280.html
Copyright © 2020-2023  润新知