当我在 printWindow.document.write 的代码中添加 css 样式时，预览将显示空白页。所以我删除了 css，然后我的内容就出现了。我不知道如何解决这个问题。所以，如果有人知道请告诉我那个解决方案。谢谢:)
<script type="text/javascript">
$("#btnPrint").live("click", function () {
var divContents = $("#dvContainer").html();
var printWindow = window.open('', '', 'height=500,width=1000');
printWindow.document.write('<html>');
printWindow.document.write('<link rel="stylesheet" type="text/css" href="/src/style/print.css">');
printWindow.document.write('<head>')
printWindow.document.write('</head>');
printWindow.document.write('<body >');
printWindow.document.write(divContents);
printWindow.document.write('</body>');
printWindow.document.write('</html>');
printWindow.print();
printWindow.close();
});
</script>form, div, table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 {
width: 80%;
background-color: #f1f1c1;
}
table#t02 {
width: 80%;
background-color: #d35400;
}
#btnPrint {
width: 84px;
height: 45px;
background: white;
border: none;
color: black;
font-size:14px;
font-weight:700;
display: block;
margin: auto;
}
.table-content {
width:50%;
}
.table-content th {
padding:5px 20px;
background: #F0F0F0;
vertical-align:middle;
}
.table-content td {
padding:5px 20px;
vertical-align:middle;
}<div id="dvContainer">
<table style="width:80%;" align="center">
<h1 style="text-align: center;">Mypage</h1>
<tr>
<th rowspan="4" style="text-align: center;"><img src="./img/automatic_billing.png" alt="Mountain View" style="width:200px;height:200px;"></th>
<td style="text-align: center;">My page</td>
</tr>
</table>
<br>
<table id="t01" align="center">
<tr>
<th style="text-align: center;">Start date</th>
<th style="text-align: center;">End date</th>
<th style="text-align: center;">Unit</th>
<th style="text-align: center;">Multiplier</th>
<th style="text-align: center;">Total</th>
</tr>
<tr>
<td style="text-align: center;"><?php echo $post_at; ?></td>
<td style="text-align: center;"><?php echo $post_at_to_date; ?></td>
<td style="text-align: center;"><?php echo round($sum, 2); ?></td>
<td style="text-align: center;"><?php echo $_POST["name"]; ?></td>
<td style="text-align: center;"><?php echo round($Total, 2); ?></td>
</tr>
</table>
<br>
</form><br>
</form>
</div>
<table style="width:80%" id="t02" align="center"><td>
<input type="button" value="Print bill" id="btnPrint"></td><br>
</table>最佳答案
必须触发您的 JavaScript 代码才能运行。
这通常通过以下方式完成:
$('document').ready(function(){
$("#btnPrint").live("click", function(){
...
});
});
关于javascript - 为什么在添加 CSS 后预览空白页？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44144286/