Я изменил ответ @BillPaetski, чтобы использовать querySelector, добавить необязательный CSS, удалить принудительный тег H1 и сделать заголовок необязательно указанным или извлеченным из окна. Кроме того, он больше не выполняет автоматическую печать и предоставляет доступ к внутренним компонентам, чтобы их можно было переключать в функции-обертки или по своему усмотрению.
Единственными двумя частными переменными являются tmpWindow и tmpDoc, хотя я полагаю, что доступ title, css и elem может различаться, следует предполагать, что все аргументы функции являются частными.
Код:
function PrintElem(elem, title, css) {
var tmpWindow = window.open('', 'PRINT', 'height=400,width=600');
var tmpDoc = tmpWindow.document;
title = title || document.title;
css = css || "";
this.setTitle = function(newTitle) {
title = newTitle || document.title;
};
this.setCSS = function(newCSS) {
css = newCSS || "";
};
this.basicHtml5 = function(innerHTML) {
return '<!doctype html><html>'+(innerHTML || "")+'</html>';
};
this.htmlHead = function(innerHTML) {
return '<head>'+(innerHTML || "")+'</head>';
};
this.htmlTitle = function(title) {
return '<title>'+(title || "")+'</title>';
};
this.styleTag = function(innerHTML) {
return '<style>'+(innerHTML || "")+'</style>';
};
this.htmlBody = function(innerHTML) {
return '<body>'+(innerHTML || "")+'</body>';
};
this.build = function() {
tmpDoc.write(
this.basicHtml5(
this.htmlHead(
this.htmlTitle(title) + this.styleTag(css)
) + this.htmlBody(
document.querySelector(elem).innerHTML
)
)
);
tmpDoc.close(); // necessary for IE >= 10
};
this.print = function() {
tmpWindow.focus(); // necessary for IE >= 10*/
tmpWindow.print();
tmpWindow.close();
};
this.build();
return this;
}
Использование:
DOMPrinter = PrintElem('#app-container');
DOMPrinter.print();