打印 HTML div 样式不适用于 bootstrap

Question

I'm trying to print a div content using Javascript.我正在尝试使用 Javascript 打印 div 内容。 I am using external css files for styling.我正在使用外部 css 文件进行样式设置。 But print document do not apply styles after adding bootstrap.css .但是打印文档在添加bootstrap.css后不应用样式。

Here is my code.这是我的代码。

HTML page HTML页面

<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 CSS文件

.myclass {
    color: greenyellow;
}

Is it a problem with media queries?媒体查询有问题吗？ Before adding bootstrap it works with other style.在添加引导程序之前，它适用于其他样式。

Answer 1

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?如果你检查 bootstrap css 你会看到 col-sm-xx 在 768px 之后变大了，col-md-xx 在 992px 之后变大了，A4 打印的视口是 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因此，您必须使用 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%;
        }            
}

Might need to add more inside @media print可能需要在@media 打印中添加更多内容

Answer 2

Just try the below code, I am using Bootstrap 4试试下面的代码，我正在使用 Bootstrap 4

Javascript code: Javascript代码：

     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: HTML代码：

    <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>

Answer 3

To get boostrap css on print div just try this要在打印 div 上获取 boostrap css 只需试试这个

<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>

打印 HTML div 样式不适用于 bootstrap

问题描述

3 个解决方案

解决方案1
10 已采纳 2014-10-14 07:48:02

解决方案2
3 2018-09-20 14:06:37

解决方案3
0 2020-02-27 09:56:41

打印 HTML div 样式不适用于 bootstrap

问题描述

3 个解决方案

解决方案1 10 已采纳 2014-10-14 07:48:02

解决方案2 3 2018-09-20 14:06:37

解决方案3 0 2020-02-27 09:56:41

解决方案1
10 已采纳 2014-10-14 07:48:02

解决方案2
3 2018-09-20 14:06:37

解决方案3
0 2020-02-27 09:56:41