Javascript document.getElementById（'；printf'；）.contentWindow.print（）在打印输出中包含html标记元素_Javascript_Iframe_Printing

Javascript document.getElementById（'；printf'；）.contentWindow.print（）在打印输出中包含html标记元素

javascript iframe printing

Javascript document.getElementById（'；printf'；）.contentWindow.print（）在打印输出中包含html标记元素,javascript,iframe,printing,Javascript,Iframe,Printing,我一直在尝试打印动态创建的iFrame，然后打印它： // CREATE iFrame let iframe = document.createElement("iframe"); iframe.setAttribute('id', 'printerIFrame'); iframe.setAttribute('name', 'printerIFrame'); iframe.setAttribute('style', ' z-index: 1000;'); iframe.setAttri

我一直在尝试打印动态创建的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日

我得到了这样的东西：开始日期：2019年1月1日结束日期：2019年1月31日

你有什么办法让它工作吗

您的问题如下

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

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

然后获取该文本节点并将其添加到iframe的主体中

body.appendChild(pageContent);

这就是为什么

createPrintableText

返回的“html”显示为原样，因为您说过“我希望内容与原样完全相同”

您要做的是将HTML作为字符串，并将其添加到

正文中。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);

修复了使用略有不同的代码将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);

//创建iFrame
让iframe=document.createElement（“iframe”）；
setAttribute（'id'，'printerIFrame'）；
setAttribute（'name'，'printerIFrame'）；
iframe.setAttribute（'style'，'display:hidden；'）；//z指数：1000；
//setAttribute（'media'，'print'）；
让pageContent=document.createTextNode（createPrintableText（条件））；
//将iFrame添加到文档
document.body.appendChild（iframe）；
//使用打印材料填充iFrame
iframe=document.getElementById（“PrinterFrame”）；
body=iframe.contentWindow.document.getElementsByTagName（'body'）[0]；
body.appendChild（页面内容）
//获取iFrame窗口`
var x=document.getElementById（“PrinterFrame”）.contentWindow；
//使用iFrame创建新的“窗口”
var newWin=window.frames[“printerIFrame”]；
newWin.document.write（“”+createPrintableFilters（标准）+“”）；
newWin.document.close（）；
//设置延迟
setTimeout（函数（）{
//移除iFrame
iframe.parentNode.removeChild（iframe）
}, 100);

pageContent

是一个文本节点。。。因此，使用

appendChild

添加它将在该变量中添加精确的文本。。尝试

body.innerHTML=pageContent

而不是可能重复的Oh，您还需要让pageContent=createPrintableText（标准）-也就是说，你不想创建一个文本元素，只是文本是fineAh-ha，这就是为什么它现在工作的原因，因为新代码正在重写先前创建的文本节点！谢谢你解释是什么导致了我原来的错误。@JustinMacCreery-不，一点也不，没有先前创建的文本节点，也没有覆盖任何内容-你把自己的答案和我的混淆了