Geek Answers Handbook

Print HTML div with styles not working with bootstrap

I am trying to print the contents of a div using Javascript. I use external css files for styling. But the printed document does not apply styles after adding bootstrap.css.

Here is my code.

HTML page

<html>
    <head>
        <title>Print Div Test</title>
        <link href="css/mycss.css" rel="stylesheet" />
        <link href="css/bootstrap.css" rel="stylesheet" />

        <script src="js/lib/jquery-1.11.1.js"></script>
        <script type="text/javascript">

            function PrintElem() {
                Popup($('#mydiv').html());
            }

            function Popup(data) {
                var mywindow = window.open('', 'my div', 'height=400,width=600');
                mywindow.document.write('<html><head><title>my div</title>');
                mywindow.document.write("<link rel=\"stylesheet\" href=\"css/bootstrap.css\" type=\"text/css\" media=\"print\" />");
                mywindow.document.write("<link rel=\"stylesheet\" href=\"css/mycss.css\" type=\"text/css\"  />");
                mywindow.document.write('</head><body >');
                mywindow.document.write(data);
                mywindow.document.write('</body></html>');

                mywindow.print();
                //mywindow.close();

                return true;
            }

        </script>
    </head>
<body>
    <div>
        <div id="mydiv" class="row">
            <h1>This will be printed. </h1>
            <div class="col-md-6">
                <div style="color: red">In line styles applied.</div>
            </div>
            <div class="col-md-6">
                <div class="myclass">Style from sheet</div>
            </div>

        </div>
<input type="button" value="Print Div" onclick="PrintElem()" />
</div>
</body>
</html>

CSS file

.myclass {
    color: greenyellow;
}

Is this a problem with media queries? Before adding bootstrap, it works with a different style.

+4
source share
1 answer

, "" . bootstrap css, , col-sm-xx 768px, col-md-xx 992px, A4- - 670px? ( -?). , col-xs-xx - col-sm-xx

@media print {
      .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
      .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
           float: left;               
      }

      .col-sm-12 {
           width: 100%;
      }

      .col-sm-11 {
           width: 91.66666666666666%;
      }

      .col-sm-10 {
           width: 83.33333333333334%;
      }

      .col-sm-9 {
            width: 75%;
      }

      .col-sm-8 {
            width: 66.66666666666666%;
      }

       .col-sm-7 {
            width: 58.333333333333336%;
       }

       .col-sm-6 {
            width: 50%;
       }

       .col-sm-5 {
            width: 41.66666666666667%;
       }

       .col-sm-4 {
            width: 33.33333333333333%;
       }

       .col-sm-3 {
            width: 25%;
       }

       .col-sm-2 {
              width: 16.666666666666664%;
       }

       .col-sm-1 {
              width: 8.333333333333332%;
        }            
}

@media print

+5

More articles:


All Articles