document.getElementById('printf').contentWindow.print() is including the html tag elements in the printout

Question

I have been attempting to print a dynamically created iFrame, then print it:

// CREATE iFrame 
let iframe = document.createElement("iframe"); 
iframe.setAttribute('id', 'printerIFrame'); 
iframe.setAttribute('name', 'printerIFrame'); 
iframe.setAttribute('style', ' z-index: 1000;'); 
iframe.setAttribute('media', 'print'); 

let pageContent = document.createTextNode(createPrintableText(criteria)); 

// ADD iFrame to document 
document.body.appendChild(iframe); 

// POPULATE iFrame with print material 
iframe = document.getElementById("printerIFrame"); 
body = iframe.contentWindow.document.getElementsByTagName('body')[0];
body.appendChild(pageContent)

// GET iFrame `window`
var x = document.getElementById("printerIFrame").contentWindow;

// IF NOT IE or Edge 
x.document.close(); 
x.focus(); 
x.print(); 

iframe.parentNode.removeChild(iframe);

And this works... sort of. The problem is, when the print preview arrives, contained in the text are all the <[HTML]> tags that are on the iframe. And they're ignored. Instead of getting this:

Start Date: 01/01/2019
End Date: 01/31/2019

I'm getting something like this: Start Date: 01/01/2019<[br tag]>End Date: 01/31/2019<[br tag]>

Any ideas how to get this to work?

`pageContent` is a text node ... therefore adding it using `appendChild` will add the exact text in that variable .. try `body.innerHTML = pageContent` instead — Jaromanda X, Mar 06 '19 at 22:11
Possible duplicate of [Print the contents of a DIV](https://stackoverflow.com/questions/2255291/print-the-contents-of-a-div) — Steven Stark, Mar 06 '19 at 22:12
Oh, you'll also need to just `let pageContent = createPrintableText(criteria);` - i.e. you don't want to create a text element, just the text is fine — Jaromanda X, Mar 06 '19 at 22:24

score 0 · Answer 1 · answered Mar 06 '19 at 22:28

Your issue is as follows

Firstly, you are creating a text node in

let pageContent = document.createTextNode(createPrintableText(criteria));

Then you take this text node and add it to the body of the iframe

body.appendChild(pageContent);

That is why the "html" returned by createPrintableText is shown as is, because you've said "I want the content to be this text exactly as it is"

What you want to do is take the HTML as a string, and add it to the body.innerHTML as follows - the two lines marked **** are the only required changes

let iframe = document.createElement("iframe"); 
iframe.setAttribute('id', 'printerIFrame'); 
iframe.setAttribute('name', 'printerIFrame'); 
iframe.setAttribute('style', ' z-index: 1000;'); 
iframe.setAttribute('media', 'print'); 

// **** assuming createPrintableText(criteria) returns the HTML you need
let pageContent = createPrintableText(criteria); 

// ADD iFrame to document 
document.body.appendChild(iframe); 

// POPULATE iFrame with print material 
iframe = document.getElementById("printerIFrame"); 
body = iframe.contentWindow.document.getElementsByTagName('body')[0];

// **** add the HTML to body innerHTML - that way it's treated as HTML
body.innerHTML = pageContent;

// GET iFrame `window`
var x = document.getElementById("printerIFrame").contentWindow;

// IF NOT IE or Edge 
x.document.close(); 
x.focus(); 
x.print(); 

iframe.parentNode.removeChild(iframe);

Ah-ha, that's why it's working now as the new code is over-writing the text node created earlier! Thanks for explaining what's causing my original error. — Justin MacCreery, Mar 07 '19 at 13:22
@JustinMacCreery - no, not at all, there is no text node created earlier, and there is no overwriting of anything - you're confusing your own answer with mine — Jaromanda X, Mar 08 '19 at 23:41

score 0 · Answer 2 · answered Mar 07 '19 at 12:56

Fixed it using slightly different code to send the iframe to the printer:

// CREATE iFrame 
let iframe = document.createElement("iframe"); 
iframe.setAttribute('id', 'printerIFrame'); 
iframe.setAttribute('name', 'printerIFrame'); 
iframe.setAttribute('style', 'display: hidden;'); // z-index: 1000;
// iframe.setAttribute('media', 'print'); 

let pageContent = document.createTextNode(createPrintableText(criteria)); 

// ADD iFrame to document 
document.body.appendChild(iframe); 

// POPULATE iFrame with print material 
iframe = document.getElementById("printerIFrame"); 
body = iframe.contentWindow.document.getElementsByTagName('body')[0];
body.appendChild(pageContent)

// GET iFrame `window`
var x = document.getElementById("printerIFrame").contentWindow;

// CREATE new `window` using iFrame 
var newWin = window.frames["printerIFrame"];
newWin.document.write('<body>' + createPrintableFilters(criteria) + '</body>');
newWin.document.close();

// SET delay
setTimeout(function(){
    // REMOVE iFrame 
    iframe.parentNode.removeChild(iframe)
}, 100);

document.getElementById('printf').contentWindow.print() is including the html tag elements in the printout

2 Answers2