Распечатать содержимое модального всплывающего окна

Question

У меня есть приложение, которое показывает список элементов.

Пользователь может щелкнуть элемент и просмотреть его детали в модальном всплывающем окне (по центру DIV, показан с использованием JavaScript). Мне нужно, чтобы в этом всплывающем окне была кнопка, позволяющая пользователю распечатывать только содержимое модального всплывающего окна.

Это для внутреннего приложения, которое должно работать только в IE7 +. Когда пользователь нажимает кнопку печати в модальном всплывающем окне, состояние элемента изменяется на «напечатано» (по внутренним деловым причинам ...).

Я использую ASP.NET и ASP.NET AJAX Control Toolkit ModalPopupExtender , но я предполагаю, что метод достижения этого будет ориентирован на браузер и не зависит от серверных технологий.

Answer 1

Вы можете добавить имя класса 'noprint' в div, оборачивая все, что вы не хотите печатать.

Если вы также хотите, чтобы главная страница печаталась без диалогового окна, вы можете добавить имя класса в оболочку DIV, когда пользователь нажимает кнопку PRINT, и после этого удалить имя класса.

@media print {
.noprint {
 display:none
}
}

Answer 2

Чтобы отобразить всплывающее содержимое в другом стиле (например, не по центру, ширина 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();
  }

Примечание. Не работает с кнопкой печати браузера.

Answer 3

Попробуйте это

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();
}

Это распечатает содержимое в другом окне, используя ваши таблицы стилей

Answer 4

Вы можете перенаправить на страницу для печати, которая содержит содержимое модального всплывающего окна. Убедитесь, что на странице есть window.print () в событии load. Как только ваш пользователь достигнет этой страницы, вы можете просто отметить это.

Что произойдет, если пользователь попадет туда и отменит печать?