print div only, via copying into hidden iframe first

J

jon

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.contentWindow);

// now copy non-styled content in
printObj.contentWindow.document.body.innerHTML = divObj.innerHTML;

// just for debugging
printObj.style.display='';
alert(printObj.contentWindow.document.body.outerHTML);
}

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.rel != null && linkNodeArr.rel == 'stylesheet')
{
var styleObj = win2.document.createElement('link');
var attribArr = linkNodeArr.attributes;
for (var j = 0; j < attribArr.length; j++){
styleObj.setAttribute(attribArr[j].nodeName,
attribArr[j].nodeValue);
}
headNodeObj.appendChild(styleObj);
}
}
}
 
A

ASM

jon a écrit :
I'm trying to use a hidden iframe to print the contents of one div
Click to expand...

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 = 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);
}
 
E

Evertjan.

ASM wrote on 05 dec 2006 in comp.lang.javascript:
jon a écrit :
I'm trying to use a hidden iframe to print the contents of one div
Click to expand...

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 = 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);
}
Click to expand...


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>
===============================
 
J

jon

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...

ASM wrote on 05 dec 2006 in comp.lang.javascript:




jon a écrit :
Click to expand...
why won't you display only this div ?
Click to expand...
function prtObj(idObj) {
idObj = document.getElementById(idObj);
var all = new Array();
var i =0;
while(document.body.firstChild)
{
all = 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);
}don't need so much JS for that:
Click to expand...


========= 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>
===============================
Click to expand...
 
A

ASM

Evertjan. a écrit :
ASM wrote on 05 dec 2006 in comp.lang.javascript:

don't need so much JS for that:
Click to expand...

Certainly not but it is too funny to see the page emptying,
the only one div,
then the page to re-fill up :)
========= test.html ===========
<style>
@media print {
div {display:none;}
div.printDiv {display:block;}
}
</style>
Click to expand...

and where is the function to choose the div ?
 
A

ASM

jon a écrit :
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.
Click to expand...

Something like I did test before to post my idea
(file : more than 600 lines of html)
(div : a table with 2 rows)
And I will have many divs that have the
ability to print themselves.
Click to expand...

They have a brain ? (to be capable to decide by themselves)
Still trying to get the iframe solution going...
Click to expand...

in your iframe have a page opened similar to your main page, but with
empty body

then

function prtObj(idObj) {
var to = parent.myFrame.document.body;
var from = getElementById(idObj);
var i=0;
while(to.firstChild) {
to.removeChild(to.firstChild);
i++;
}
to.appendChild(from);
parent.myFrame.print();
}
 
E

Evertjan.

ASM wrote on 05 dec 2006 in comp.lang.javascript:
Evertjan. a écrit :

Certainly not but it is too funny to see the page emptying,
the only one div,
then the page to re-fill up :)
Click to expand...

[If you want that that can also be done with a rippling
....display='none']
and where is the function to choose the div ?
Click to expand...

Where?

That is easy to write in clientside JS, don't you think?

function printdiv(divId) {
var divId = document.getElementById(divId);
divId.className='printDiv';
print();
divId.className='';
};
 
A

ASM

Evertjan. a écrit :
[If you want that that can also be done with a rippling
...display='none']
Click to expand...

Ho no ! too much easy :)
Where is the pleasure ?
That is easy to write in clientside JS, don't you think?
Click to expand...

No, I'll have to try what that give with a div which already has a class.
 
E

Evertjan.

ASM wrote on 05 dec 2006 in comp.lang.javascript:
No, I'll have to try what that give with a div which already has a class.
Click to expand...

You can temporarily swap the className:

function printdiv(divId) {
var divId = document.getElementById(divId);
var temp = ivId.className
divId.className = 'printDiv';
print();
divId.className = temp;
};

===============================

And even then why "have to"?
As a programmer you are in charge!!!
 
A

ASM

Evertjan. a écrit :
You can temporarily swap the className:

function printdiv(divId) {
var divId = document.getElementById(divId);
var temp = ivId.className
divId.className = 'printDiv';
Click to expand...

divId.className='printDiv '+temp; // no ?
 
E

Evertjan.

ASM wrote on 06 dec 2006 in comp.lang.javascript:
Evertjan. a écrit :

divId.className='printDiv '+temp; // no ?
Click to expand...

NO !!!!

The classname is staticly defined as the one that will print,
and is dynamicly assigned to the id-ed div that you want to print.

Try this:

========= test.html ===========

<style>
@media screen {
div {background-color:white;}
div.printDiv {background-color:yellow;color:red;}
}
@media print {
div {display:none;}
div.printDiv {display:block;}
}
</style>

<script type='text/javascript'>
function printdiv(divId) {
var divId = document.getElementById(divId);
divId.className='printDiv';
print();
alert('Only this is printing [uncoloured!]:\n'
+ divId.innerHTML)
divId.className='';
alert('Back to normal display')
};
</script>

<body>
<div>
<button onclick='printdiv("d1");'>Print 1</button>
<button onclick='printdiv("d2");'>Print 2</button>
<button onclick='printdiv("d3");'>Print 3</button>
<button onclick='printdiv("d4");'>Print 4</button>
</div>
<div id = 'd1'>qwerty 1</div>
<div id = 'd2'>blah 2</div>
<div id = 'd3'>asdfg 3</div>
<div id = 'd4'>blah 4</div>
</body>

===============================
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Only one table shows up with the information 2
Getting information from a hidden IFrame 4
How to decode this javascript? 19
Jquery not registering the ready func 2
Border lines in hidden div bleed through into visible div 2
Prototype 1.6--Somebody Stop These People 6
Copy IFRAME content into DIV 3
invalid pointer creating a div popup with javascript 0

Members online

Total: 58 (members: 2, guests: 56)
Robots: 408

Forum statistics

Threads
473,994
Messages
2,570,223
Members
46,813
Latest member
lawrwtwinkle111

Latest Threads

Top