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

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

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


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

ASM

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

don't need so much JS for that:

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>

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.

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.

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

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 :)

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

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']

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

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.

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';

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 ?

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

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top