Question

当我使用JavaScript更改模态页面的内容时，我无法让Google Chrome打印正确的内容。这是我的代码：

使用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中，父页面与模态一起打印（模态看起来是透明的），而不仅仅是模态。

Answer 1

我想当你重新分配原始的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();
}

Answer 2

我找到了两个问题的答案。解决方案是将脚本分成三个脚本（打印前，打印期间和打印后），并在后两个脚本上使用setTimeout。它现在完美无缺。

Window.print在Google Chrome中打印不正确的内容

2 个答案: