发新话题
打印

【jcp使用手册】设置图文并茂的页眉页脚

【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属性指定,可以有htmlheight属性,用法与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
  
  当前时间,长时间格式
  

TOP

TOP

发新话题