Javascript 使用HTML和CSS打印预览功能_Javascript_Html_Css

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

javascript html css

Javascript 使用HTML和CSS打印预览功能,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('&

我正在使用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;


函数printpreview（divId）{
var content=document.getElementById（divId）.innerHTML；
var mywindow=window.open（“”，'Print'，'height=600，width=800'）；
mywindow.document.write（'Print'）；
mywindow.document.write（“”）；
mywindow.document.write（'MANAGEMENT'）；
mywindow.document.write（'Sales Records'）；
mywindow.document.write（“”）；
mywindow.document.write（内容）；
mywindow.document.write（“”）；
mywindow.document.write（'2019资源规划系统版权所有。保留所有权利。'）；
mywindow.document.write（“”）；
mywindow.document.close（）；
mywindow.focus（）；
mywindow.print（）；
mywindow.close（）；
返回true；

}

我使用下面的代码在点击超链接时调用该函数

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

我希望正确的消息出现在每个打印预览页的末尾，但它只出现在最后一页的末尾。e、 g.如果有5页，我希望此“复制正确”消息出现在每页的页脚中。

将您希望在每页上包含的元素包装在一个可选元素内，如带类的div，并在css中在文档底部的某个位置指定一个

固定的
例如，改变
mywindow.document.write('Copyright 2019 Resource Planing System. All rights reserved.</p> </div>');

将您希望在每个页面上包含的元素包装在一个可选元素内，如带有类的div，并在css中在文档底部的某个位置提供一个固定的位置
例如，改变
mywindow.document.write('Copyright 2019 Resource Planing System. All rights reserved.</p> </div>');

嘿，我假设您的目的是模拟浏览器的内置打印预览功能。你不能很有效地完成这项工作，但是你可以创建一个常规的打印按钮。为此，只需调用按钮window.print（）
。默认情况下，Chromium浏览器将呈现内置打印预览。Firefox将打开系统的打印对话框。对其他人不太清楚。嘿，我假设您在这里的目的是模拟浏览器的内置打印预览功能。你不能很有效地完成这项工作，但是你可以创建一个常规的打印按钮。为此，只需调用按钮window.print（）
。默认情况下，Chromium浏览器将呈现内置打印预览。Firefox将打开系统的打印对话框。不确定其他人。我已经试过了，但页脚文本与我正在打印的上面的文本重叠。我试图打印一个表position:fixed
将元素从正常文档流中取出，这样其他元素就好像它不存在一样。请尝试将重叠内容上移或向其容器中添加边距/填充。您可以建议我一种方法，如何限制html表格中的某些特定行在页面上打印，例如，我想在一页上打印5行，这样文本将保持从页脚向上，并且不会重叠。我试过下面的css，但它在chrome中不起作用@媒体打印{tr:nth类型（5n）{page break after:always；}}'请看一下这个。也许这会有帮助。我已经试过了，但页脚文本与我正在打印的上面的文本重叠。我试图打印一个表position:fixed将元素从正常文档流中取出，这样其他元素就好像它不存在一样。请尝试将重叠内容上移或向其容器中添加边距/填充。您可以建议我一种方法，如何限制html表格中的某些特定行在页面上打印，例如，我想在一页上打印5行，这样文本将保持从页脚向上，并且不会重叠。我试过下面的css，但它在chrome中不起作用@媒体打印{tr:nth类型（5n）{page break after:always；}}'请看一下这个。也许这会有帮助。
.footer-text { 
    position: fixed;
    bottom: 0;
}