0

我在我的网页上添加了 3 个打印按钮，每个按钮打印网页的一部分（div）。这是代码

function printPage(id)
{
   var html="<html>";
   //html+="<link rel="stylesheet" type="text/css" href="../css/template.css" />";
   html+= document.getElementById(id).innerHTML;
   html+="</html>";

   var printWin = window.open('','_blank','left=0,top=0,width=500,height=500,fullscreen=1,toolbar=0,scrollbars=0,status  =0');
   printWin.document.write(html);
   printWin.document.close();
   printWin.focus();
   printWin.print();
   printWin.close();
}


 <input name="b_print" type="button" class="ipt"   onClick="printPage('one');" value="Print One">
<input name="b_print" type="button" class="ipt"   onClick="printPage('two');" value="Print Two">
<input name="b_print" type="button" class="ipt"   onClick="printPage('three');" value="Print three">

因此，当我单击“打印”按钮时，会打开一个新窗口，打印成功并关闭它。我对此有几个问题

首先，我想在同一页面中弹出打印窗口。为此，我已将_blank属性window.open替换为_parent，但在打印后，页面不会重定向或返回到我启动打印的页面。如何避免这种情况？

其次，如何控制打印页面的样式？我试图链接一个样式表（如上面的代码所示），但它不起作用。

提前感谢您的任何帮助或建议

function printPage(printpage)
                {
                    var headstr = '<html><head></head>'+'<link rel="stylesheet" type="text/css" href="../css/template.css" />'+'<body><br/><br/><br/>';
                    var footstr = "</body>";
                    var newstr = document.all.item(printpage).innerHTML;
                    var oldstr = document.body.innerHTML;
                    document.body.innerHTML = headstr+newstr+footstr;                   
                    window.print();
                    document.body.innerHTML = oldstr;
                    return false;
                }
4

2 回答 2

0

您可以使用隐藏的 iframe，而不是使用弹出窗口。这将使事情保持在“同一页面”中。制作一个已经包含样式表路径的虚拟页面“print.html”。如果您有正确的路径，它将起作用。

在打印虚拟页面中，创建一个从父页面获取 HTML 内容的函数（在本例中为名为 HTMLStuff 的字符串），然后打印自身：

<iframe id="printf" src="print.html" name="printf"></iframe>

document.body.innerHTML = parent.htmlStuff;
window.print()

您可以设置 iframe 的 SRC 并制作抓取不同内容的不同页面。还有其他方法可以做到这一点，但这非常简单。

于 2012-07-30T18:02:16.310 回答
0

要在渲染页面以进行打印时应用样式表的一部分，您可以使用：

@media print {    
    /*
    Your css here
    */
}
于 2016-10-24T11:28:38.240 回答