gpt4 book ai didi

javascript - 如何控制打印页面的样式?

转载 作者:行者123 更新时间:2023-11-28 13:47:36 24 4
gpt4 key购买 nike

我在我的网页上添加了 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">

所以当我点击“打印”按钮时,一个新窗口打开,打印成功并关闭它。我对此没有什么疑问

首先,我想在同一页面中弹出打印窗口。为此,我将 window.open 中的 _blank 属性替换为 _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;
}

最佳答案

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

在打印虚拟页面中,创建一个函数,从父页面获取 HTML 内容(在本例中是一个名为 HTMLStuff 的字符串),然后打印它自己:

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

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

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

关于javascript - 如何控制打印页面的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11726755/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com