document.getElementById ('printf'). contentWindow.print () включает в себя элементы html-тега в распечатке - PullRequest
Новая
       3

document.getElementById ('printf'). contentWindow.print () включает в себя элементы html-тега в распечатке

0 голосов
/ 07 марта 2019

Я пытался напечатать динамически созданный 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);

И это работает ... вроде.Проблема заключается в том, что при появлении предварительного просмотра в тексте содержатся все теги <[HTML]>, которые находятся в iframe.И они игнорируются.Вместо этого:

Дата начала: 01/01/2019
Дата окончания: 01/31/2019

Я получаю что-то вроде этого: Дата начала:01.01.2009 <[br tag]> Дата окончания: 31.01.2009 <[br tag]>

Есть идеи, как заставить это работать?

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

Исправлено использование немного другого кода для отправки 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);
0 голосов
/ 07 марта 2019

Ваша проблема заключается в следующем

Сначала вы создаете текстовый узел в 

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

Затем вы берете этот текстовый узел и добавляете его в тело iframe 

body.appendChild(pageContent);

Вот почему "html", возвращаемый createPrintableText, отображается как есть, потому что вы сказали: "Я хочу, чтобы содержимое было таким же, как оно есть"

Что выхочу сделать, это взять 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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...