Как распечатать скрытый контент div с помощью jquery?

Question

У меня есть якорная кнопка и скрытый div. Я пишу код для печати содержимого div. Но некоторое время его показывает содержимое в файле печати, а некоторое время оно пустое. Пожалуйста, помогите мне

<div class="row-fluid printdiv" id="printdiv" style="display:none;"> 
     <div class="col-md-8 indexleft"> 
     <div class="blog"> 
     <!-- blog details --> 
     <div class="blogdetail row-fluid"> 
      <div class="col-md-5"> 
      <figure><img src="images/24hr-Gym-Logo-2014-698x198.jpg" alt="" /></figure> 
      </div> 
      <div class="col-md-7"> 
      <div class="title"> 
       <h2><a href="#">Relief For Chronic Back Pain 1</a></h2> 
      </div> 
      <div class="writer"> 
       <label>Writtern By :- </label> 
       Bev Matushewski</div> 
      </div> 
     </div> 
     <!-- blog text --> 
     <div class="blogtext row-fluid"> 
      <p>“Back problems are among the most common chronic conditions in Canada. Four out of five adults will experience at least one episode of back pain at some time in their lives. It can be highly disabling, it may cause significant work loss, and reduce the quality of life for the individual. Over the years that I have been teaching the Alexander Technique, I estimate that 75% of my students come because of pain. It could be back or neck pain, pain from injuries that have been slow to recover or pain from working at the computer for long hours. Singers, actors, musicians, dancers or people who just want to develop more self-awareness and self-growth make up the rest.</p> 
      <p>Back pain can occur at any point of the spine, and is characterized by a range of symptoms including pain, muscle tension or stiffness, weakness in the legs or feet, and a possible tingling or burning sensation. It is often caused by strain on muscles and ligaments that support the spine. Lower back problems are most common, because it bears the most weight and physical stress. The discs in the lumbar spine are often subjected to constant pressure by exaggerated bending and postural distortion which can impinge on the spinal cord or one of its outlet nerves. It may result not only in back pain but also in pain travelling down the leg. This condition is usually known as “sciatica”.</p> 
      <p>If you have back pain and you would like to try the Alexander Technique, it is important to ask why you have back pain. There are many causes for back pain such as infections or injuries. Please consult your doctor, if your pain is sudden or acute. Teachers of the Alexander Technique are not trained in diagnosing your issue medically. If you are in doubt, see your GP.</p> 
      <p>Secondly, you may ask yourself, if your pain is life-style related. In most cases, it is. Unconsciously, we develop movement habits that harm our bodies, and we often use too much effort in all our daily activities. For instance, sitting all day at the computer with poor posture can contribute to back pain. Activities in the house done with too much strain might create back pain. Even sports activities such as running, if done badly, make pain more likely. Most often, ongoing postural habits are the causing or contributing factor for many back problems. This is when the Alexander Technique can help you.</p> 
     </div> 


     </div> 

    </div> 
    <!-- side bar --> 
    <div class="col-md-4 blogright"> 
     <!--<h2 class="color-text" style="color:#000000;">Our Features</h2>--> 
     <!--div> 
        <div><img src="/images/yoga-add3.jpg"> </div> 
       </div--> 

     <section id="calender" class="stag-custom-widget-area "> 

     <aside id="text-22" class="widget widget_text"> 
      <div class="textwidget"><br> 

      <div class="row"> 
       <div class="col-md-12" style="float:left"> <a href="http://www.whiterockcity.ca/EN/main/community/leisure/leisure-guide.html"><img src="http://foreverfit.today/wp-content/uploads/2014/12/rock_ad.jpg" height="200" width="300"></a> </div> 
       Lorem ipsum here Lorem ipsumLor sumLorem ipsumL orem ipsumLo rem ipsumLorem ips umLorem ipsumLorem ipsum Lorem ipsum here Lorem ipsumLor sumLorem ipsumL orem ipsumLo rem ipsumLorem ips umLorem ipsumLorem ipsum 
      </div> 
      </div> 
     </aside> 

     </section> 
    </div> 
    <!-- end of side bar --> 
    </div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 

<script> 

    function printbox(){ 
     var content = $('#printdiv').html(); 
      var printWindow = '<html><head><title>my div</title><link rel="stylesheet" href="css/print.css" /></head><body>'+ content +'</body></html>'; 

      mywindow = window.open('', 'print div', 'height=400,width=600'); 
      mywindow.document.write(printWindow); 
      mywindow.print(); 
      return true; 
    } 


    $(function(){ 
     $('#printbtn').click(function(e) { 
      printbox(); 
     }); 
    }); 
</script> 

Answer 1

Просто задерживая вызов вашей печати на короткий промежуток времени даст вашему браузеру время на самом деле писать содержимое в PrintWindow.

Вы можете достичь этого путем замены линии

mywindow.print(); 

с

setTimeout(function(){ mywindow.print() }, 100); 

Это приведет к задержке вызова печати() и должен решить вашу проблему.