使用HTML和CSS的打印预览功能

时间:2019-10-29 17:34:59

标签: javascript html css

我正在使用如下所示的Javascript函数打印表格

<script type="text/javascript" >
function printpreview(divId) {
var content = document.getElementById(divId).innerHTML;
var mywindow = window.open('', 'Print', 'height=600,width=800');    

mywindow.document.write('<html><head><title>Print</title>');
mywindow.document.write('</head><body>');
mywindow.document.write('<div align="center"><h2> MANAGEMENT</h2></div>');
mywindow.document.write('<div align="center"><h3>Sales Records</h3></div>');
mywindow.document.write("<link rel=\"stylesheet\" href=\"/public/css/style.css\" 
type=\"text/css\"/>");
mywindow.document.write(content);
mywindow.document.write('<p style="color: #5B5745; font-family:verdana; font-size:11px; font-style:normal; font-weight:bold;">' );
mywindow.document.write('Copyright 2019 Resource Planing System. All rights reserved.</p> </div>');     
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus();
mywindow.print();
mywindow.close();

return true;

}

点击超级链接时,我会使用以下代码调用该函数

 <a class="manage_link" href="" onclick="printpreview('printdiv')" >Print Preview </a>     

我希望正确的消息出现在每个打印预览页面的末尾,但仅出现在最后一页的末尾。例如如果有5页,我希望此版权信息出现在每页的页脚中。

1 个答案:

答案 0 :(得分:0)

将您希望在每个页面上包含的元素包装在诸如div之类的可选元素内,并在CSS中将fixed位置放在文档底部的某个位置。

例如,更改

mywindow.document.write('Copyright 2019 Resource Planing System. All rights reserved.</p> </div>');

mywindow.document.write('<div class="footer-text">Copyright 2019 Resource Planing System. All rights reserved.</div></p> </div>');

并包含如下所示的css规则:

.footer-text { 
    position: fixed;
    bottom: 0;
}