twitter-bootstrap 打印样式不适用于引导程序的 HTML div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26354611/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Print HTML div with styles not working with bootstrap
提问by Janith Widarshana
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.
我正在尝试使用 Javascript 打印 div 内容。我正在使用外部 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.
媒体查询有问题吗？在添加引导程序之前，它适用于其他样式。
回答by tmg
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
是的，这是引导媒体查询的“问题”。如果你检查 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%;
}
}
Might need to add more inside @media print
可能需要在@media 打印中添加更多内容
回答by Chandrahasa Rai
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>
回答by Sibin Thomas Qu4d
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>
