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');

我将图像添加到窗口的所有尝试都没有产生窗口，窗口立即打开和关闭，或者窗口打开图像但没有显示打印对话框。我有＆＃34;优惠券＆＃34; image hosted externally并尝试使用basic HTML file并将图片包裹在div中。我错过了什么？

Answer 1

无需打开新窗口。 CSS Print Media就是您所需要的。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

创建一个新的HTML文件“print-coupon.html”，该文件显式调用print命令并在新窗口中打开该HTML文件。

<img src="http://ecommerce.maurices.com/str/pzTesting/mysteryOffer/coupon.gif" />
<script>
    window.print();
</script>

http://jsfiddle.net/hpswddey/

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

2 个答案: