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

标签 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 页,我希望此版权信息显示在每页的页脚中。

最佳答案

将您想要在每个页面上拥有的元素包裹在一个可选择的元素中,例如带有类的 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;
}

关于javascript - 使用 HTML 和 CSS 的打印预览功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58612730/

相关文章:

javascript - 将过滤后的值传递给 react render()

html - Canvas 背景和 HTML <body> 元素

javascript - 网页幻灯片 : Change position, 导航箭头的不透明度和样式

css - v4 Bootstrap 类的问题

javascript - 尝试使用 Javascript 动态更改 CSS 失败。为什么?

javascript - 使用 Javascript 显示 Quicktime 电影的当前时间和结束时间

javascript - 带有关联的 Sequelize.build

java - 使用 Java 读取 HTML+JavaScript

javascript - javascript 中的轮盘赌

javascript - 他们如何使用此页面上的 native mac 颜色选择器 : http://beta. theexpressiveweb.com/#!/css3-gradients