Распечатать содержимое модального всплывающего окна
У меня есть приложение, которое показывает список предметов.
Пользователь может щелкнуть элемент и просмотреть сведения о нем в модальном всплывающем окне (DIV по центру, показанный с использованием JavaScript). Мне нужна кнопка в этом всплывающем окне, которая позволит пользователю распечатать только содержимое модального всплывающего окна.
Это для внутреннего приложения, которое должно работать только в IE7 +. Когда пользователь нажимает кнопку печати в модальном всплывающем окне, состояние элемента изменяется на «напечатано» (по внутренним причинам бизнеса ...).
Я использую ASP.NET и Набор средств управления ASP.NET AJAX ModalPopupExtender, но предполагаю, что метод достижения этого будет ориентирован на браузер и не зависит от серверных технологий.
Ответы 4
Вы можете перенаправить на страницу для печати, содержащую содержимое модального всплывающего окна. Убедитесь, что страница имеет window.print () в событии загрузки. Как только ваш пользователь перейдет на эту страницу, вы можете просто отметить это.
Что произойдет, если пользователь попадет туда и отменит печать?
Вы можете добавить имя класса noprint в div, обертывающий все, что вы не хотите печатать.
Если вы также хотите, чтобы главная страница была доступна для печати без диалога, вы можете добавить имя класса в оболочку DIV, когда пользователь нажимает кнопку PRINT, и удалить имя класса после.
@media print {
.noprint {
display:none
}
}
Попробуй это
function PrintContent() {
var DocumentContainer = document.getElementById('nameofDiv');
var WindowObject = window.open("", "PrintWindow",
"width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
WindowObject.document.write();
WindowObject.document.write('<link rel = "stylesheet" type = "text/css" href = "path-to-my-stylesheet.css">')
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}
Это распечатает содержимое в другом окне, используя ваши таблицы стилей.
Чтобы отобразить содержимое всплывающего окна с другим стилем (например, не по центру, ширина 100%), я динамически обновляю положение _foregroundElement (PopupControlID) и _backgroundElement (созданного расширителем всплывающих окон) при печати.
var basePrint = window.print;
window.print = function() {
var popup = $find( '<%= [PopupExtenderID].ClientID %>' );
popup._backgroundElement.style.position = 'static';
popup._foregroundElement.style.position = 'static';
popup._layout();
basePrint();
// Restore settings for display
popup._backgroundElement.style.position = 'fixed';
popup._foregroundElement.style.position = 'fixed';
popup._layout();
}
Примечание. Не работает с кнопкой печати в браузере.