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

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

4 голосов
/ 22 февраля 2011

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

Мой вопрос заключается в том, возможно ли это только с помощью параметра 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 или использовал команды браузера. Мой клиент хочет, чтобы изображение «просто печаталось», когда пользователь щелкает ссылку, поэтому я пытаюсь найти самый простой способ сделать это.

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

Ответы [ 5 ]

10 голосов
/ 22 февраля 2011

Вам нужно будет вызвать 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>
2 голосов
/ 30 января 2018

Ответ Коди Бонни не будет работать в некоторых браузерах, если полный 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 это угловой код.Все остальное должно работать, пока вы предоставляете свое собственное значение url откуда-то еще

2 голосов
/ 22 февраля 2011

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

1 голос
/ 22 февраля 2011

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

0 голосов
/ 22 февраля 2011

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

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

...