页眉页脚即是打印在每页上部、下部的内容,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
| 当前时间,长时间格式
|