杰表技术论坛 - Powered by Discuz! Board

标题: 【jcp使用手册】设置图文并茂的页眉页脚 [打印本页]

作者: admin 时间: 2018-3-14 10:41 标题: 【jcp使用手册】设置图文并茂的页眉页脚

页眉页脚即是打印在每页上部、下部的内容，JCP允许你在myDoc对象中，设置页眉，页脚，也可以在页眉、页脚中显示当前页号，总页数，当前日期等信息。

要生成如图所示页眉，需要设置如下：

复制内容到剪贴板

代码:

<script>  
    function print() {  
          var myDoc = {  
            header : {  
                html : document.getElementById('myheader') // 也可以为字符串类型，如'<span>杰创软件</span>'
            },  
            documents : document,  
            copyrights : '杰创软件拥有版权  www.jatools.com'  
          }  
          getJCP().printPreview(myDoc);  
    }  
</script>  
  
<div id='myheader' style='display:none'>  
    <div style="border-bottom: 1px solid black; text-align: right">  
        <img style="float: left" border="0" src="logojj.gif" width="176" height="53">  
        <span>  
            <strong>杭州杰创软件有限公司</strong><br> 地址：杭州市西斗门路3号天堂软件园A幢19层A座   邮编：310012<br> 总机：0571-88254255   北京办事处：010-51297501  
        </span>  
    </div>  
</div>

其中myDoc.header属性是一个Object对象，该对象可以有两个属性： html：表示页眉上应该显示的html内容，该对象为HTML DOM对象时，如本例，则取其innerHTML为页眉内容，如果是字符串，则直接就是页眉内容。 height: 表示该页眉需要占用的高度，以像素为单位，默认以html内容形成的高度。页脚用myDoc.footer属性指定，可以有html和height属性，用法与header类似。如下所示：

复制内容到剪贴板

代码:

var myDoc = {  
    footer : {  
        html : '<div style="text-align: right; border-top: 1px solid black;"><strong> #D #T  #p/#P </strong></div>',  
        height:50  
    },  
    documents : document,  
    copyrights : '杰创软件拥有版权  www.jatools.com'  
  
}  
getJCP().printPreview(myDoc);

效果如下：

页脚中，显示了当前日期及时间，和当前页，总页数。当JCP发现页眉页脚中，有#号开始的字符，就会从以下表中，找到有没有对应项，如果有，就计算并替换：

#p	当前页号
#P	总页数
#d	当前日期，以控制面板/区域与语言选项中设置的短日期格式
#D	当前日期，长日期格式
#t	当前时间，长时间格式
#T	当前时间，长时间格式

图片附件: QQ截图20180314104139.png (2018-3-14 10:41, 4.67 KB) / 该附件被下载次数 7670
http://jatools.com/attachment.php?aid=1005&k=574b77270261c123af99890a0d5f8b56&t=1737245781

图片附件: QQ截图20180314104125.png (2018-3-14 10:41, 44.73 KB) / 该附件被下载次数 7720
http://jatools.com/attachment.php?aid=1006&k=62475e3080c8fd1c365d5710b1e9d4dd&t=1737245781

作者: admin 时间: 2018-3-14 10:47

在线示例： http://print.jatools.com/jcp/0.99/headsfoots.htm

欢迎光临杰表技术论坛 (http://jatools.com/)