如何使用jQuery打印隐藏的div内容？

Question

I have an anchor button and a hidden div. I write a code to print the content of div. But some time its shows the content in print file and some time it is blank. Please help me

<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

Just delaying the call of your print by a short amount of time will give your browser the time to actually write the content into the printWindow.

You can achieve this by replacing the line

mywindow.print();

with

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

This will delay the print() call and should solve your problem.