[英]Print HTML div with styles not working with 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>
CSS文件
.myclass {
color: greenyellow;
}
媒体查询有问题吗? 在添加引导程序之前,它适用于其他样式。
是的,这是引导媒体查询的“问题”。 如果你检查 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%;
}
}
可能需要在@media 打印中添加更多内容
试试下面的代码,我正在使用 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>
要在打印 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.