Блог

Главная - Вопросы по программированию - Печать изображения при первом нажатии не отображает изображение

Печать изображения при первом нажатии не отображает изображение

#javascript

#javascript

Вопрос:

Приведенный ниже java-скрипт для печати изображения onClick не работает должным образом. Изображение не загружается при первом нажатии. Когда пользователь нажимает на кнопку, открывается пустое / разбитое изображение. После закрытия первого окна печати затем при втором щелчке отображается изображение.

 <a href="#" onclick="VoucherPrint('output/image.jpg'); return false;">Print Voucher</a>

function VoucherSourcetoPrint(source) {
    return "<html><head><script>function step1(){n"  
    "setTimeout('step2()', 10);}n"  
    "function step2(){window.print();window.close()}n"  
    "</scri"   "pt></head><body onload='step1()'>n"  
    "<img src='"   source   "' /></body></html>";
}
function VoucherPrint(source) {
    Pagelink = "about:blank";
    var pwa = window.open(Pagelink, "_new");
    pwa.document.open();
    pwa.document.write(VoucherSourcetoPrint(source));
    pwa.document.close();
}

Комментарии:

1. Зачем вам нужны функции step1() и step2()?

2. @OzgurSar хорошо, если вы можете сделать в рамках VoucherPrint никаких проблем, пожалуйста, помогите

3. Ваш код отлично сработал для меня с первого щелчка. Попробуйте продлить время ожидания. Потенциально некоторая задержка при загрузке вашего изображения.

4. @farhodius не могли бы вы дать ответ с таймаутом, и я постараюсь

5. Я думаю, что решение, предложенное @mplungjan, выглядит лучше с точки зрения использования onload event. Дайте мне знать, если это не сработает для вас.

Ответ №1:

Ваш код слишком сложный.

Попробуйте это вместо

 document.getElementById("printVoucher").addEventListener("click",function(e) {
  const img = e.target.dataset.src;
  const html = `<body onload="window.print();setTimout(function() {window.close()},500)"><img src="${img}" /></body>`;
  const pwa = window.open("", e.target.target);
  if (pwa) {
    pwa.document.open();
    pwa.document.write(html);
    pwa.document.close();
    e.preventDefault(); // cancel the link
  }
  else e.target.href=img; // popup blocker. Open the image in a new tab
})
 
 <a href="#" target="_blank" id="printVoucher" data-src="output/image.jpg">Print Voucher</a>

Комментарии:

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

2. Я использовал setTimeout, как и вы. Если диалоговое окно печати не открывается, это связано с блокировкой всплывающих окон

Метки: