Открыть изображение для печати в новом окне с помощью jQuery

Я пытался заставить этот, казалось бы, простой jQuery работать. План состоит в том, чтобы иметь внешнее изображение, которое является меньшей версией большой рекламной целевой страницы, открывается в новом окне с диалоговым окном печати, а затем закрывается после печати (или отмены). Это ближайший я могу заставить его работать (jsfiddle):Открыть изображение для печати в новом окне с помощью jQuery

$('#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. Что мне не хватает?

источник

2015-06-24 paulmz

Там нет необходимости открывать новое окно. CSS Print Media - это все, что вам нужно.

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

источник

2015-06-24 16:31:32 epascarello

Спасибо, espascarello. Это работало даже лучше, чем я планировал. Я изначально не хотел открывать новое окно, но, прочитав много других сообщений, это казалось необходимым. Я рад, что есть способ открыть окно. Мне просто нужно было определить, куда положить «», который работал на самой вершине тела. – paulmz

Ну, это решение действительно работало, пока я не загрузил его, чтобы перейти в прямом эфире. Наша хостинговая компания имеет весь наш сайт, «придуманный» для IE7, потому что они отказываются обновлять свои Prototype.js. Это постоянно ограничивает то, что я пытаюсь сделать, и определенно затрудняет конкуренцию с другими подобными сайтами, которые не имеют этого ограничения. Итак, просто примечание о том, что ** это решение не работает на IE8 или ниже из-за мультимедийного запроса CSS **. Я предполагаю, что это означает возврат к чертежной доске. – paulmz

Создайте новый HTML-файл «print-coupon.html», который явно вызывает команду печати и открывает этот файл HTML в новом окне.

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

http://jsfiddle.net/hpswddey/

источник

2015-06-24 16:25:53

Итак, я в конечном итоге происходит с этим решением, так как это, кажется, работает с нашим сайтом, который понижен совместимости IE7. Благодаря! – paulmz

Открыть изображение для печати в новом окне с помощью jQuery

ответ

Смежные вопросы