Question

我正在尝试使用Javascript打印div内容。我正在使用外部CSS文件进行样式设置。但添加bootstrap.css后，打印文档不会应用样式。

这是我的代码。

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

.myclass {
    color: greenyellow;
}

媒体查询有问题吗？在添加bootstrap之前，它适用于其他样式。

Answer 1

是的，这是一个问题＆＃34;使用bootstrap媒体查询。如果你检查bootstrap css，你会看到col-sm-xx在768px之后变大，在992px之后col-md-xx，A4打印的视口是670px？（Safe Width in Pixel for Printing Web Pages?）。因此，您必须使用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

中添加更多内容

Answer 2

只需尝试以下代码，我正在使用Bootstrap 4

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

    <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

要在打印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>

使用不支持bootstrap的样式打印HTML div

3 个答案: