javascript - 使用 jQuery 打开图像以在新窗口中打印

Question

我一直在努力让这个看似简单的 jQuery 发挥作用。计划是有一个外部图像，它是大型促销登陆页面的较小版本，在带有打印对话框的新窗口中打开，然后在打印(或取消)后关闭。这是我最接近它的工作方式 ( jsfiddle ):

$('#printBtn').click(function() {
    var couponWindow=window.open('','couponWindow','width=580,height=710');
    couponWindow.focus();
    couponWindow.print();
    couponWindow.close();
});

我尝试了很多尝试和变体来在新窗口中打开图像，包括:

var couponWindow=window.open(this.href('http://ecommerce.maurices.com/str/pzTesting/mysteryOffer/coupon.gif'),'couponWindow','width=580,height=710');

和

var URL = $.myURL("index", $(this).attr('http://ecommerce.maurices.com/str/pzTesting/mysteryOffer/coupon.gif'));
    window.open(URL,'couponWindow','width=580,height=710');

我将图像添加到窗口的所有尝试都没有生成窗口，窗口立即打开和关闭，或者窗口打开时带有图像但不显示打印对话框。我有“优惠券”image hosted externally也尝试过 basic HTML file图像包裹在 div 中。我错过了什么？

Answer 1

无需打开新窗口。 CSS 打印媒体就是您所需要的。

$("button").on("click", function() {
  $("#coupon").off("load").on("load", function() {
    window.print();
  }).attr("src", "http://www.cdc.gov/animalimportation/images/dog2.jpg");
});

body #coupon {
  display: none;
}
@media print {
  body * {
    display: none;
  }
  body #coupon {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This will not print</p>
<img id="coupon" />
<button>Print coupon</button>