Skip to content Skip to sidebar Skip to footer
Home / Javascript / Jquery / Php

Print Window Not Working 1st Time

Post a Comment
I am trying to save a PDF using print option, but for some reason the 1st time it doesn't work, it comes up with an empty page. I have Googled and got some solutions, but no luck.

Solution 1:

In order to check where the problem was, I modified your code so it puts everything in a variable and then write it to the window. It seems like document.write doesn't render the contents before you try to print the window. Instead, I changed the innerHTML of the body, which seems to be working fine:

$("#btnPrint").click(function(){
  $(".accordion-content").css('display','block');
  var printWindow = window.open('', '', 'height=400,width=1200');
  var html = ''+
    '<html>'+
    '<head>'+
    '<link rel="stylesheet" type="text/css" href="css/print.css"/>'+
    '</head>'+
    '<body onload="window.focus();" onbeforeunload="window.close();">'+
    $(".logoHolder").html();
  $('input[class="subCheck"]:checked').each(function() {
    html += $("#"+this.value).html()+"<br><br><br>";
  });
  html += '</body></html>';
  //printWindow.document.write(html);
  printWindow.document.body.innerHTML = html;
  printWindow.print();
});

http://jsfiddle.net/hoqp8zxp/

Update to help you with your css

Regarding the CSS, I believe there are a couple of problems:

  1. The new window location is about:blank (or something similar) so relative paths won't work. You should use an absolute path (http://host/css/print.css instead of css/print.css)
  2. Since stylesheets load asynchronously, you might have to use a hack in order to execute the print command once the stylesheet is fully loaded. Something like this: https://viget.com/inspire/js-201-run-a-function-when-a--finishes-loadingNote: You could also just load the styles using a style tag

This is the updated code using the hack mentioned above (using an from StackOverflow):

$("#btnPrint").click(function(){
  $(".accordion-content").css('display','block');
  var printWindow = window.open('', '', 'height=400,width=1200');
  var cssFile = 'http://cdn.sstatic.net/stackoverflow/all.css?v=544053bd81fe';//Replace with your absolute pathvar html = ''+
    '<html>'+
    '<head>'+
    '<link  type="text/css" href="'+cssFile+'"/>'+
    '</head>'+
    '<body onload="window.focus();" onbeforeunload="window.close();">'+
    $(".logoHolder").html();
  $('input[class="subCheck"]:checked').each(function() {
    html += $("#"+this.value).html()+"<br><br><br>";
  });
  html += '</body></html>';
  //printWindow.document.write(html);
  printWindow.document.body.innerHTML = html;
  var img = document.createElement('img');
  printWindow.document.body.appendChild(img);
  img.style.display = 'none';
  img.onerror = function(){
    printWindow.print();
  };
  img.src = cssFile;
});

http://jsfiddle.net/hoqp8zxp/1/

Solution 2:

I use setTimeOut for this problem and work fine for me.I modified your code with my solution.

$("#btnPrint").click(function () {
 // alert("hi");
 $(".accordion-content").css('display','block');
 var printWindow = window.open('', '', 'height=400,width=1200');
 var strin="";
 printWindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="css/print.css"/></head><body onload="window.focus();" onbeforeunload="window.close();">');
 // alert($(".logoHolder").html());
 printWindow.document.write($(".logoHolder").html());
 $('input[class="subCheck"]:checked').each(function() {
      strin += $("#"+this.value).html()+"<br><br><br>";
 });
 printWindow.document.write(strin);
 // alert();
 printWindow.document.write('</body></html>');
 printWindow.close();
setTimeout(function () {
            printWindow.focus();
            printWindow.print();
             }, 1000);
});

Post a Comment for "Print Window Not Working 1st Time"