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

Share Improve this question Follow edited Apr 19, 2017 at 10:17 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Apr 19, 2017 at 10:04 BharathiBharathi 1,33822 gold badges1414 silver badges4545 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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)