I have some html contents and image and print the page on button click. When i print it first time the print preview page is empty and second time it is fine. Please help on why it is not print the page first time

Image source is base-64 format. So, due to the large content, i not able to add code snippet, Please check with demo link.

<input type="button" id="printImage" onclick=printImage() value="print" />

function printImage() {
  var htmlContent = "The html code in stack-overflow exceeded. So please check with demo link for html content";
  var win = window.open();
  win.document.write(htmlContent);
  win.document.close();
  win.focus();
  win.print();
  win.close();
}

sample demo link

Anyone help me on this..

I have some html contents and image and print the page on button click. When i print it first time the print preview page is empty and second time it is fine. Please help on why it is not print the page first time

Image source is base-64 format. So, due to the large content, i not able to add code snippet, Please check with demo link.

<input type="button" id="printImage" onclick=printImage() value="print" />

function printImage() {
  var htmlContent = "The html code in stack-overflow exceeded. So please check with demo link for html content";
  var win = window.open();
  win.document.write(htmlContent);
  win.document.close();
  win.focus();
  win.print();
  win.close();
}

sample demo link

Anyone help me on this..

• javascript
• jquery
• html
• printing

3 Answers 3

win.document.write(htmlContent);
win.document.close();
win.focus();
setTimeout(function(){win.print();win.close();}, 10);

Try it out,

change to

   var win = window.open('', '', 'toolbar=0');
    win.document.write(htmlContent);
     win.document.onload = function () {

    win.document.close();
    win.focus();
    win.print();
    win.close();
    };

this will work, on load will make sure that the page is loaded before executing next item.

 var win = window.open('', '', 'toolbar=0');
    win.document.write(htmlContent);
    win.document.close();
    win.focus();
    setTimeout(function () { 
    win.print();},50);
    window.close();
        }   

this will wait for 50 miliseconds before print execute .so your base64 image can bind on html...(TESTED)