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 表导出到 Excel - jQuery
- visual-studio-code - 关于 .vscode-server 目录的问题
- python - pyspark 到 mongodb 的连接问题
- sql - 如何在sql中修复该过程
- matlab - 从表中提取和组合不同的值并制作新变量(用于直方图)
- python - 如何将execvp的输出通过管道传输到python中的变量
- android - 如何将视图与约束布局的末尾以及开始约束对齐
- c - 如何检索用户输入值并将其存储到 C (JNI) 中的 jchar 数组中?
- flutter - 我需要分开手势来拖动地图和标记的 onTap google_maps_flutter
- angular - 错误错误:找不到名称为“名称”的控件