Question

当我在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>

Answer 1

必须触发您的JavaScript代码才能运行。

这通常以下列方式完成：

$('document').ready(function(){
    $("#btnPrint").live("click", function(){
        ...
    });
});

Answer 2

好的，我现在可以解决问题了。 This is解决方案。只需编辑我的js。

$("#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('<title>Electricity Bill &nbsp;&nbsp; Floor 1: Room 2</title>');
            printWindow.document.write('</head>');
            printWindow.document.write('<body >');
            printWindow.document.write(divContents);
            printWindow.document.write('</body>');
            printWindow.document.write('</html>');
            printWindow.document.close();
            setTimeout(function () {
              printWindow.print();
            }, 500);
        });

Answer 3

您必须等待加载工作表

....
var string = '<html><head><link rel="stylesheet" href="print.css"></head><body>'
    + divContents +'</body></html>';
var printWindow = window.open('', '', 'height=500,width=1000');
    printWindow.document.write(string);
window.setTimeout(function() {
  printWindow.print();
  printWindow.close();
}, 3);
 ...

为什么在添加CSS后预览空白页？

3 个答案: