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

Question

I have been trying to get this seemingly simple jQuery to work. The plan is to have an external image, which is a smaller version of a large promotional landing page, open in a new window with a print dialog and then close after printing (or canceling). This is the closest I can get it to work ( jsfiddle ):

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

I have tried numerous attempts and variations to open the image into the new window including:

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

and

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

All of my attempts to add the image to the window either produces no window, the window opens and closes immediately, or the window opens with the image but doesn't show the print dialog. I have the "coupon" image hosted externally and have also tried with a basic HTML file with the image wrapped in a div. What am I missing?

Answer 1

There is no need to open up a new window. CSS Print Media is all you need.

 $("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> 

Answer 2

Create a new HTML file "print-coupon.html" that explicitly invokes the print command and have that HTML file open in a new window.

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

http://jsfiddle.net/hpswddey/