首先打印div，通过复制到隐藏的iframe [英] print div only, via copying into hidden iframe first
问题描述
我正在尝试使用隐藏的iframe无缝地打印一个div
的内容。目前我可以创建隐藏的iframe，将div的
内容复制到iframe，然后打印出来。我甚至有一个方法
，最初将所有原始页面的样式复制到新的
iframe上以保持外观。
到目前为止，工作和div（以及样式的外观和感觉）
成功复制到iframe并打印隐藏的
iframe工作原理。
我面临的问题是打印的页面没有应用我复制的任何
样式，即使它们在查看iframe时可以看到这个iframe。
任何人都知道为什么会这样吗？
下面是代码，复制和粘贴，供参考。
var printObj = document.createElement（''iframe''）;
printObj.id = baseObj.id +''BoxPrint'';
printObj.style.width = document.body.clientWidth;
printObj.style.height = document.body.clientHeight ;
printObj.style.display =''none' ;
document.body.appendChild（printObj）;
函数printDiv（divObj）{
//将所有父样式复制到iframe中外观和感觉
copyStylesAcrossWin（top，this.printObj.contentWindo w）;
//现在复制
printObj.contentWindow.document.body.innerHTML = divObj.innerHTML;
//仅用于调试
printObj.style.display = '''';
alert（printObj.contentWindow.document.body.outerHT ML）;
}
函数copyStylesAcrossWin （win1，win2）{
if（win1 == null || win2 == null）{return; }
var linkNodeArr = win1.document.getElementsByTagName（''link''）;
var headNodeObj = win2.document.getElementsByTagName（''head''）。item （0）;
for（var i = 0; i< linkNodeArr.length; i ++）{
if（linkNodeArr [i] .rel！= null& & linkNodeArr [i] .rel ==''stylesheet''）
{
var styleObj = win2.document.createElement（''link''）;
var attribArr = linkNodeArr [i] .attributes;
for（var j = 0; j< attribArr.length; j ++）{
styleObj.setAttribute（attribArr [j] .nodeName，
attribArr [j] .nodeValue）;
}
headNodeObj.appendChild（styleObj） ;
}
}
}
I''m trying to use a hidden iframe to print the contents of one div
seamlessly. Currently I can create the hidden iframe, copy the
contents of the div to the iframe, and print it. I even have a method
that initially copies all the original page''s styles onto the new
iframe to maintain look and feel.
So far things work, and the div (along with look and feel from styles)
are successfully copied to the iframe and printing just the hidden
iframe works.
The problem I''m facing is that the printed page doesn''t have any of the
styles applied that I copied across, even though they are visible in
the iframe when viewing it.
Anyone have any idea why this might be?
Below is the code, copied and pasted, for reference.
var printObj = document.createElement(''iframe'');
printObj.id = baseObj.id + ''BoxPrint'';
printObj.style.width = document.body.clientWidth;
printObj.style.height = document.body.clientHeight;
printObj.style.display = ''none'';
document.body.appendChild(printObj);
function printDiv(divObj){
// copy all parent styles to iframe for proper "look and feel"
copyStylesAcrossWin(top,this.printObj.contentWindo w);
// now copy non-styled content in
printObj.contentWindow.document.body.innerHTML = divObj.innerHTML;
// just for debugging
printObj.style.display='''';
alert(printObj.contentWindow.document.body.outerHT ML);
}
function copyStylesAcrossWin(win1, win2){
if(win1 == null || win2 == null){ return; }
var linkNodeArr = win1.document.getElementsByTagName(''link'');
var headNodeObj = win2.document.getElementsByTagName(''head'').item(0) ;
for (var i = 0; i < linkNodeArr.length; i++) {
if (linkNodeArr[i].rel != null && linkNodeArr[i].rel == ''stylesheet'')
{
var styleObj = win2.document.createElement(''link'');
var attribArr = linkNodeArr[i].attributes;
for (var j = 0; j < attribArr.length; j++){
styleObj.setAttribute(attribArr[j].nodeName,
attribArr[j].nodeValue);
}
headNodeObj.appendChild(styleObj);
}
}
}
推荐答案
jonaécrit：
jon a écrit :
我正在尝试使用隐藏的iframe来打印一个div的内容
I''m trying to use a hidden iframe to print the contents of one div
为什么你不显示这个div？
函数prtObj（idObj）{
idObj = document.getElementById（idObj）;
var all = new Array（）;
var i = 0;
while（document.body.firstChild）
{
all [i] = document.body.removeChild（document.body.firstChild）;
i ++;
}
document.body.appendChild（idObj）;
print（）;
document.body.removeChild（idObj）;
for（var i = 0; i< all.length; i ++）
document.body.appendChild（all [i]）;
}
-
Stephane Moriaux et son（moins）vieuxMacdéjàdépassé
Stephane Moriaux和他的（较少）旧Mac已经过时了
why won''t you display only this div ?
function prtObj(idObj) {
idObj = document.getElementById(idObj);
var all = new Array();
var i =0;
while(document.body.firstChild)
{
all[i] = document.body.removeChild(document.body.firstChild );
i++;
}
document.body.appendChild(idObj);
print();
document.body.removeChild(idObj);
for(var i=0;i<all.length;i++)
document.body.appendChild(all[i]);
}
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
ASM在05年写道2006年12月在comp.lang.javascript ：
ASM wrote on 05 dec 2006 in comp.lang.javascript:
jonaécrit：
jon a écrit :
>我正在尝试使用隐藏的iframe打印一个div的内容
>I''m trying to use a hidden iframe to print the contents of one div
为什么赢了'你只显示这个div吗？
函数prtObj（idObj）{
idObj = document.getElementById（idObj）;
var all = new Array（）;
var i = 0;
while（document.body.firstChild）
{
all [i] = document.body.removeChild（document.body.firstChild）;
i ++;
}
文件.body.appendChild（idObj）;
print（）;
document.body.removeChild（idObj）;
for（var i = 0; i< all.length; i ++）
document.body.appendChild（all [i]）;
}
why won''t you display only this div ?
function prtObj(idObj) {
idObj = document.getElementById(idObj);
var all = new Array();
var i =0;
while(document.body.firstChild)
{
all[i] = document.body.removeChild(document.body.firstChild );
i++;
}
document.body.appendChild(idObj);
print();
document.body.removeChild(idObj);
for(var i=0;i<all.length;i++)
document.body.appendChild(all[i]);
}
不需要那么多的JS：
========= test.html ===========
< style>
@media print {
div {display：none;}
div.printDiv {display：块;}
}
< / style>
< body>
< ; div>< button onclick =''print（）;''>打印它< / button>< / div>
< div> qwerty< / div>
< div> qwerty< / div>
< div class =''printDiv''>只打印此< / div>
< div> qwerty< / div>
< / body>
=============== ================
-
Evertjan。
荷兰。
（请将x''es更改为我的电子邮件地址中的点数）
don''t need so much JS for that:
========= test.html ===========
<style>
@media print {
div {display:none;}
div.printDiv {display:block;}
}
</style>
<body>
<div><button onclick=''print();''>Print it</button></div>
<div>qwerty</div>
<div>qwerty</div>
<div class=''printDiv''>Print only this</div>
<div>qwerty</div>
</body>
===============================
--
Evertjan.
The Netherlands.
(Please change the x''es to dots in my emailaddress)
最后两个帖子都是很好的建议......但页面是
来自于相当复杂的div只有一小部分（可能是3％
），或总页数。而且我会有很多具有
打印能力的div。所以我必须以某种方式动态地应用printDiv类
。同样，我有能力打印整个
页面，所以这些类不能干扰它。
仍然试图获得iframe解决方案去...
12月5日下午3:06，Evertjan。 < exjxw.hannivo ... @interxnl.netwrote：
Both the last two posts are good suggestions... but the page it is
coming from is quite complex where the div just one small section (3%
maybe), or the total page. And I will have many divs that have the
ability to print themselves. So I''d have to apply the printDiv class
dynamically somehow. Likewise, I have the ability to print he entire
page, so these classes can''t interfere with that.
Still trying to get the iframe solution going...
On Dec 5, 3:06 pm, "Evertjan." <exjxw.hannivo...@interxnl.netwrote:
ASM于2006年12月5日在comp.lang.javascript中写道 ：
ASM wrote on 05 dec 2006 in comp.lang.javascript:
jonaécrit：
jon a écrit :
我正在尝试使用一个隐藏的iframe打印一个div的内容
I''m trying to use a hidden iframe to print the contents of one div
为什么你不显示这个div？
why won''t you display only this div ?
function prtObj（idObj）{
idObj = document.getElementById（idObj）;
var all = new Array（）;
var i = 0;
while（document.body.firstChild）
{
all [i] = document.body.removeChild（document.body.firstChild）;
i ++;
}
document.body.appendChild（idObj）;
print（）;
document.body.removeChild（idObj）;
for（var i = 0; i< all.length; i ++）
document.body.appendChild（all [i]）;
}不需要那么多JS ：
function prtObj(idObj) {
idObj = document.getElementById(idObj);
var all = new Array();
var i =0;
while(document.body.firstChild)
{
all[i] = document.body.removeChild(document.body.firstChild );
i++;
}
document.body.appendChild(idObj);
print();
document.body.removeChild(idObj);
for(var i=0;i<all.length;i++)
document.body.appendChild(all[i]);
}don''t need so much JS for that:
========= test.html ===========
<风格>
@media print {
div {display：none;}
div.printDiv {display：block;}}< /风格>
< body>
< div>< button onclick =''print（）;''>打印< / button> ;< / div>
< div> qwerty< / div>
< div> qwerty< / div>
< div class =''printDiv''>仅打印此< / div>
< div> qwerty< / div>
< / body>
=================== ============
-
Evertjan。
荷兰。
（请将x''es更改为我的电子邮件地址中的点） - 隐藏引用的文字 - 显示引用的文字 -
========= test.html ===========
<style>
@media print {
div {display:none;}
div.printDiv {display:block;}}</style>
<body>
<div><button onclick=''print();''>Print it</button></div>
<div>qwerty</div>
<div>qwerty</div>
<div class=''printDiv''>Print only this</div>
<div>qwerty</div>
</body>
===============================
--
Evertjan.
The Netherlands.
(Please change the x''es to dots in my emailaddress)- Hide quoted text -- Show quoted text -
这篇关于首先打印div，通过复制到隐藏的iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
