CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Janith Widarshana
Janith Widarshana

Reputation: 3483

Print HTML div with styles not working with bootstrap

I'm trying to print a div content using Javascript. I am using external css files for styling. But print document do 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 it a problem with media queries? Before adding bootstrap it works with other style.

Upvotes: 5

Views: 20952

Answers (3)

Sibin Thomas Qu4d
Sibin Thomas Qu4d

Reputation: 1

To get boostrap css on print div just try this

<script> 
    function printDiv() { 
        var divContents = document.getElementById("main_div").innerHTML; 
        var a = window.open('', '', 'height=500, width=500'); 
        a.document.write('<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><html>'); 
        a.document.write('<body >'); 
        a.document.write(divContents); 
        a.document.write('</body></html>'); 
        a.document.close(); 
        a.print(); 
    } 
</script>

Upvotes: 0

Chandrahasa Rai
Chandrahasa Rai

Reputation: 457

Just try the below code, I am using Bootstrap 4

Javascript code:

     print(): void {
        let printContents, popupWin;
        printContents = document.getElementById('print-section').innerHTML;
        popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
        popupWin.document.open();
        popupWin.document.write(`
          <html>
            <head>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
            </head>
            <style>

            </style>
        <body onload="window.print();window.close()">${printContents}</body>
          </html>`
        );
        popupWin.document.close();
    }

HTML Code:

    <div class="card-body">
                    <div id="print-section">
                        <div class="row">
                            <div class="col-sm-6 col-xs-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="card-title"><b style="color:red">Company Name</b></h5>
                                        <p class="card-text">With .</p>
                                        <a href="#" class="btn btn-primary">Go somewhere</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xs-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="card-title text-center">INVOICE</h5>
                                        <p class="card-text">Ws a natural lead-in to additional
                                            content.</p>
                                        <a href="#" class="btn btn-primary">Go somewhere</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button class="btn btn-info btn-sm float-right" onclick="print()">Print</button>
                </div>

Upvotes: 7

tmg
tmg

Reputation: 20383

Yes it is a "probleme" with bootstrap media queries. If you inspect the bootstrap css you will see that col-sm-xx is getting size after 768px, col-md-xx after 992px, viewport of A4 print is 670px? (Safe Width in Pixel for Printing Web Pages?). So you have to user col-xs-xx for print or add a media query to use 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%;
        }            
}

Might need to add more inside @media print

Upvotes: 12

Related Questions