Window.print печатает неверный контент в Google Chrome - PullRequest
0 голосов
/ 19 января 2012

Мне не удается заставить Google Chrome печатать правильное содержимое, когда я изменяю содержимое модальной страницы с помощью JavaScript.Это мой код:

Javascript:

function printCoupon(couponID)
{
  var originalContents = document.body.innerHTML;
  var printable = document.getElementById(couponID);
  var printContents = printable.innerHTML;

  document.body.innerHTML = printContents;

  window.print();

  document.body.innerHTML = originalContents;
}

HTML:

<body>
  <div id="coupon1"><p>Coupon 1 contents</p></div>
  <div><a href="javascript:void(0)" onclick="printCoupon('coupon1');return false;">Print Coupon</a></div>
  <div id="coupon2"><p>Coupon 2 contents</p></div>
  <div><a href="javascript:void(0)" onclick="printCoupon('coupon2');return false;">Print Coupon</a></div>
</body>

Это работает в IE8 иFF 3.6, но Chrome 16 печатает оригинальный контент, а не печатный контент.

ОБНОВЛЕНИЕ: Я только что обнаружил еще одну проблему с этим.В IE9 родительская страница печатается вместе с модальным (модальное выглядит прозрачным), а не просто модальным.

Ответы [ 2 ]

2 голосов
/ 19 января 2012

Я полагаю, что задание на печать еще не было отправлено, когда вы переназначаете исходный innerHTML.

Я бы предпочел решение css:

CSS:

@media print{
body > div{display:none;}
.printable{display:block !important}
}

JS:

function printCoupon(couponID)
{
  if(window['printable'])
  {
    window['printable'].className='';
  }
   window['printable']=document.getElementById(couponID);
   window['printable'].className='printable';
  window.print();
}
0 голосов
/ 20 января 2012

Я нашел ответ на обе мои проблемы.Решением было разделить скрипт на три скрипта (до, во время и после печати) и использовать setTimeout для вторых двух.Теперь работает отлично.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...