Как напечатать определенное изображение HTML

Question

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

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

<a href="javascript:if(window.print)window.print()">Print</a>

Answer 1

Один из подходов состоит в том, чтобы использовать запрос @media печати, чтобы скрыть все изображения и внести в белый список только изображение, по которому щелкнули.С небольшим JavaScript мы можем динамически создать запрос на печать и прикрепить его к тегу style страницы.

Сначала я окружаю каждый img элементом button, так какЯкорь не очень хороший семантический вариант здесь.Кнопки делают вещи;якоря занимают нас места.

Далее в JavaScript мы прикрепляем обработчик щелчка к каждой кнопке, получая идентификатор ее дочернего изображения.Затем мы создаем новый запрос для печатных СМИ, стирая старый , если он существовал.В нашем динамическом фрагменте мы вводим переменную imgId, содержащую идентификатор изображения, которое мы хотим показать.Все остальные изображения не отображаются.

Наконец, происходит событие печати.Мы закончили, и только желаемое (нажатое) изображение попадает в предварительный просмотр.

const buttons = document.querySelectorAll("button");

function buttonHandler() {
  const imgId = this.querySelector("img").getAttribute("id");

  document.querySelector('style').textContent =
    `@media print {
        img { display: none; }
        #${imgId} { display: block; }
     }`;

  if (window.print) {
    window.print();
  }
}

buttons.forEach(button => {
  button.addEventListener("click", buttonHandler);
});

<button><img id="img1" src="http://placekitten.com/g/200/300" alt=""></button>
<button><img id="img2" src="http://placekitten.com/g/200/200" alt=""></button>
<button><img id="img3" src="http://placekitten.com/g/200/250" alt=""></button>

https://jsfiddle.net/xw2zbL6f/1/