document.getElementById('printf').contentWindow.print() 在打印输出中包含 html 标签元素答案

【问题标题】：document.getElementById('printf').contentWindow.print() is including the html tag elements in the printoutdocument.getElementById('printf').contentWindow.print() 在打印输出中包含 html 标签元素
【发布时间】：2019-03-06 22:08:34
【问题描述】：

我一直在尝试打印一个动态创建的 iFrame，然后打印它：

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

这很有效……有点。问题是，当打印预览到达时，包含在文本中的是 iframe 上的所有标记。他们被忽略了。而不是得到这个：

开始日期：2019 年 1 月 1 日
结束日期：2019 年 1 月 31 日

我得到这样的东西：开始日期：01/01/2019结束日期：01/31/2019

任何想法如何让它工作？

【问题讨论】：

pageContent 是一个文本节点...因此使用appendChild 添加它会将确切的文本添加到该变量中.. 尝试body.innerHTML = pageContent 代替
Print the contents of a DIV的可能重复
哦，您还需要 let pageContent = createPrintableText(criteria); - 即您不想创建文本元素，只要文本就可以了

标签： javascript iframe printing

【解决方案1】：

你的问题如下

首先，您正在创建一个文本节点

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

然后你把这个文本节点添加到 iframe 的正文中

body.appendChild(pageContent);

这就是为什么createPrintableText 返回的“html”按原样显示的原因，因为您已经说过“我希望内容完全是这个文本”

您要做的是将 HTML 作为字符串，并将其添加到 body.innerHTML，如下所示 - 标记为 **** 的两行是唯一需要的更改

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

【讨论】：

啊哈，这就是它现在可以工作的原因，因为新代码正在覆盖之前创建的文本节点！感谢您解释导致我原来的错误的原因。
@JustinMacCreery - 不，根本没有，之前没有创建文本节点，也没有覆盖任何内容 - 您将自己的答案与我的答案混淆了

【解决方案2】：

使用稍微不同的代码修复它以将 iframe 发送到打印机：

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

【讨论】：