Загрузка...

Печать изображения или части кода при нажатии

Technology
09.08.2023
8
4
2
Avatar
Автор
admin

Встал вопрос: Как сделать печать изображения или части кода при нажатии на ссылку или кнопку.

То есть при нажатии на ссылку должно выходить окно отправки изображения на принтер.

Скрипт

Ниже написанный метод мною уже протестирован и работает.

Метод работает с кнопками, ссылками и прочее… Так же печатать может, кроме изображения, часть кода, страницы и так далее.

<img src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<button id="printBut">print image</button>

<script>
window.onload = function () {
	var printBut = document.getElementById('printBut');
	printBut.onclick = function () {
		var win = window.open();
		win.document.write('<img src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">');
		win.print();
		win.close()
	}
}
</script>

По коду есть пару моментов:

  1. Он работает по ID
  2. Он работает с HTML блоком. То есть блок должен быть на странице

У меня как раз со вторым пунктом была небольшая проблема.

Мне нужно было распечатать при нажатии на ссылку купон. Купон в виде картинки. При этом сам купон не должен отображаться на странице, только при нажатии на кнопку, при отправке на печать.

Так что я сделал следующее:

Вставил на нужную страницу следующий код (это пример):

<div class="discount_block">
  <img src="/assets/images/giro_coupon.jpg">
  <a id="printBut" class="button2">Получить купон</a>
  <script>
    window.onload = function () {
      var printBut = document.getElementById('printBut');
      printBut.onclick = function () {
        var win = window.open();
        win.document.write('<img src="/assets/images/giro_coupon.jpg">');
        win.print();
        win.close()
      }
    }
  </script>
</div>

Добавил блоку (картинке) следующие стили, что бы его скрыть:

.discount_block img {
	display: none;
}

Получилось, что сама картинка есть на странице, но она скрыта стилями и не видна пользователю. Зато работает скрипт на печать данного блока с картинкой.


5 min read
Share this post:
Подписывайтесь в Telegram
Top