Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
132 views
in Technique[技术] by (71.8m points)

javascript - Printing image on first click does not show the image

Below java script to print image onClick is not working properly. It doesnt load the image on first click. When user clicks on button it opens blank/broken image. After closing the first print window then on second click it shows the image.

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

function VoucherSourcetoPrint(source) {
    return "<html><head><script>function step1(){
" +
    "setTimeout('step2()', 10);}
" +
    "function step2(){window.print();window.close()}
" +
    "</scri" + "pt></head><body onload='step1()'>
" +
    "<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();
}
question from:https://stackoverflow.com/questions/65868220/printing-image-on-first-click-does-not-show-the-image

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Your code is too complicated.

Try this instead

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...