Печать клонированного div в новом окне

51
4

Я использую следующий код для печати div в новом окне:

$('#PrintNews').bind('click', function () {          
var approot = '<%=AppRoot %>';
var printContents = new $("#divToPrint").clone();
var myWindow = window.open("", "popup", "width=800,height=600,scrollbars=yes,resizable=yes," +
"toolbar=no,directories=no,location=no,menubar=no,status=no,left=250px,top=80px");
var doc = myWindow.document;

doc.open();
$(printContents).find("#PrintNews").remove();
$(printContents).find("#bottom").remove();
doc.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
doc.write("<html>");
doc.write("<head>");
doc.write("<link href='" + approot + "/Themes/print.css' rel='stylesheet' type='text/css' />");
doc.write("<link href='" + approot + "/Themes/secretaryPortal.css' rel='stylesheet' type='text/css' />");
doc.write("</head>");
doc.write("<body style='font: 11pt/1.2 Arial !important;'>");
doc.write("<div class='story'>");
doc.write($(printContents).html());
doc.write("</div>");
doc.write("</body>");
doc.write("</html>");
myWindow.document.close();
myWindow.focus();
myWindow.print();
myWindow.close();
});

});

Он открывает диалог печати. Но страница не с оригинальным css. если я изменил 4 последних строки на:

         doc.document.close();
doc.focus();
doc.print();
doc.close();

Он открывает страницу с правильным CSS. Однако диалог печати не открывается. Я получаю сообщение об ошибке Uncaught TypeError: Cannot call method 'close' of undefined удается Uncaught TypeError: Cannot call method 'close' of undefined

Я должен открыть его в новом окне, потому что мне нужно изменить размер для диалога печати, я знаю @media print

спросил(а) 2013-09-19T17:00:00+04:00 6 лет, 6 месяцев назад
1
Решение
52

в вашем описании вместо:

doc.document.close();
doc.focus();
doc.print();
doc.close();

использовать:

myWindow.focus();
myWindow.print();
myWindow.close();

ответил(а) 2013-09-19T17:07:00+04:00 6 лет, 6 месяцев назад
51

Это окончательное решение: * Благодаря Yussuf выше


  $('#PrintNews').bind('click', function () {          
var approot = '<%=AppRoot %>';
var printContents = new $("#divToPrint").clone();
var myWindow = window.open("", "popup", "width=800,height=600,scrollbars=yes,resizable=yes," +
"toolbar=no,directories=no,location=no,menubar=no,status=no,left=250px,top=80px");

$(printContents).find("#PrintNews").remove();
$(printContents).find("#bottom").remove();
myWindow.document.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
myWindow.document.write("<html>");
myWindow.document.write("<head>");
myWindow.document.write("<link href='" + approot + "/Themes/print.css' rel='stylesheet' type='text/css' />");
myWindow.document.write("<link href='" + approot + "/Themes/secretaryPortal.css' rel='stylesheet' type='text/css' />");
myWindow.document.write("</head>");
myWindow.document.write("<body style='font: 11pt/1.2 Arial !important;'>");
myWindow.document.write("<div class='story'>");
myWindow.document.write($(printContents).html());
myWindow.document.write("</div>");
myWindow.document.write("</body>");
myWindow.document.write("</html>");
myWindow.focus();
myWindow.print();
myWindow.close();
});

ответил(а) 2013-09-19T17:38:00+04:00 6 лет, 6 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема