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

Question

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

Jan*_*ana 4 html javascript css jquery twitter-bootstrap

我正在尝试使用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>

Run Code Online (Sandbox Code Playgroud)

CSS文件

.myclass {
    color: greenyellow;
}

Run Code Online (Sandbox Code Playgroud)

这是媒体查询的问题吗？在添加bootstrap之前,它适用于其他样式.

Answer 1

tmg*_*tmg 7

是的,它是一个带有引导媒体查询的"问题".如果你检查bootstrap css,你会看到col-sm-xx在768px之后变大,在992px之后col-md-xx,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%;
        }            
}

Run Code Online (Sandbox Code Playgroud)

可能需要在@media print中添加更多内容

Answer 2

Cha*_*Rai 7

只需尝试下面的代码，我正在使用 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();
    }

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，1 月前
查看次数：	9868 次
最近记录：	7 年，2 月前