Какой самый простой способ получить изображение для печати в новом окне при нажатии?

Я пытаюсь создать простую ссылку для печати для изображения, и я бы хотел, чтобы при щелчке по ссылке открылось новое окно с изображением, а браузер откроет диалоговое окно команды печати.

Мой вопрос: возможно ли это только с помощью параметра URL-адреса или элемента привязки на начальной странице? Или мне для этого нужно создать целевую страницу с помощью javascript?

Вот пример того, что у меня есть:

<p class="click-2-print">
  <a href="/img/map.jpg" target="_blank">Click here to print the map above</a>
</p>

Очевидно, что приведенный выше код откроет изображение в новом окне, но по-прежнему требует от пользователя нажатия Ctrl + P, Cmd + P или использования команд браузера. Мой клиент хочет, чтобы изображение «просто печаталось», когда пользователь щелкает ссылку, поэтому я пытаюсь найти самый простой способ сделать это.

Итак, есть ли какие-либо параметры или атрибуты, которые я могу добавить к приведенной выше разметке, чтобы выполнить то, что я описал?


url javascript browser printing popupwindow
person Joel Glovier    schedule 22.02.2011    source источник

Ответы (5)


arrow_upward
11
arrow_downward

Вам нужно будет вызвать window.print (). Возможно, что-то вроде этого?

function printimage(){
    var URL = "http://myimage.jpg";

    var W = window.open(URL);

    W.window.print();
}

Другой вариант может заключаться в размещении изображения на странице, которая сообщает браузеру о печати при загрузке. Например...

<body onload="window.print();">
<img src="/img/map.jpg">
</body>
person Cody Bonney    schedule 22.02.2011
comment
Первый способ у меня не сработал. Окно открылось и попыталась напечатать, но поскольку изображение не загружалось до действия печати, оно ничего не просматривает. Я использовал что-то похожее на второй способ, поместив изображение на страницу и дождавшись его загрузки, и работал как шарм. - person Jonathan Calb; 07.04.2014

arrow_upward
3
arrow_downward

Ответ Коди Бонни не будет работать в некоторых браузерах, если полный URL-адрес включает расширение изображения. Браузер автоматически загрузит его, как только откроется новая вкладка. Вы можете обойти это так.

                    var url = scope.src;
                    var w = window.open('', '');
                    w.document.write('<html><head>');
                    w.document.write('</head><body >');
                    w.document.write('<img id="print-image-element" src="'+url+'"/>');
                    w.document.write('<script>var img = document.getElementById("print-image-element"); img.addEventListener("load",function(){ window.focus(); window.print(); window.document.close(); window.close(); }); </script>');
                    w.document.write('</body></html>');
                    w.window.print();

Это откроет новую страницу с изображением, предложит пользователю распечатать, а после печати закроет новую вкладку и сбросит фокус на исходную вкладку.

Не обращайте внимания на scope.src, специфичный для angular код. Все остальное должно работать до тех пор, пока вы предоставляете свое собственное значение url откуда-то еще

person Adrian    schedule 29.01.2018

arrow_upward
2
arrow_downward

Я бы порекомендовал вам создать страницу на любом языке или платформе, в которой вы работаете, которая принимает аргумент строки запроса для пути к изображению, выводит это изображение в документ и имеет onload / ready вызов window.print(). Ссылка на это вместо изображения напрямую, и сохраните target="_blank", и вы должны быть настроены.

person Nathan Anderson    schedule 22.02.2011

arrow_upward
1
arrow_downward

Вы должны вызвать window.print () в JavaScript, чтобы вызвать диалоговое окно печати браузера. Я почти уверен, что вы не сможете запустить печать без взаимодействия с пользователем, если не запустите подписанный апплет.

person Robby Pond    schedule 22.02.2011

arrow_upward
0
arrow_downward

Привет, Джаг. Хотя это не совсем то, чем вы хотите заниматься, я написал это руководство, когда работал в фирме, занимающейся веб-дизайном. Вы, вероятно, можете покопаться в этом коде, чтобы получить ссылку, по которой печатается изображение. В основном, что этот код добавляет кнопку печати в плагин jquery fancybox. Я не понимаю, почему вы не могли просто использовать часть печати, чтобы добавить ее к тому, что вам нужно. Надеюсь, поможет.

Добавить возможность печати в плагин fancybox jquery

person rchiriboga    schedule 22.02.2011