Javascript 打印HTML div时使用的样式不适用于引导
我正在尝试使用Javascript打印div内容。我正在使用外部css文件进行样式设置。但在添加Javascript 打印HTML div时使用的样式不适用于引导,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我正在尝试使用Javascript打印div内容。我正在使用外部css文件进行样式设置。但在添加bootstrap.css后，打印文档不会应用样式 这是我的密码 HTML页面 <html> <head> <title>Print Div Test</title> <link href="css/mycss.css" rel="stylesheet" /> <link href
bootstrap.css<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>
@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中添加更多内容，请尝试下面的代码，我正在使用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();
}
<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>
print（）：无效{
让打印内容，弹出窗口；
printContents=document.getElementById（'print-section'）.innerHTML；
popupWin=window.open（“”，"U blank’，“top=0，left=0，height=100%，width=auto”）；
popupWin.document.open（）；
popupWin.document.write(`
${printContents}
`
);
popupWin.document.close（）；
}
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();
}
<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>
公司名称
带有
发票
是附加功能的自然引入
内容
印刷品
<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>
函数printDiv（）{
var divContents=document.getElementById（“main_div”）.innerHTML；
变量a=窗口打开（''，''高度=500，宽度=500'）；
a、 文件。写（“”）；
a、 文件。写（“”）；
a、 文件。书写（内容）；
a、 文件。写（“”）；
a、 document.close（）；
a、 打印（）；
}