Why it previews blank page after added CSS?

Question

When I add css style in to my code at printWindow.document.write, the preview will show the blank page. So I remove css out, then my content is appeared. I don't know how to fix this problem. So, if anyone know please tell me that solution. Thanks :)

<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>

Possible duplicate of [JavaScript Document.Write Replaces All Body Content When Using AJAX](https://stackoverflow.com/questions/2360076/javascript-document-write-replaces-all-body-content-when-using-ajax) (JTBC, I am aware there's no AJAX involved here - but the answers apply here as well.) — CBroe, May 23 '17 at 20:41
I supposed to post my answer here but I'm glad you solved the issue. BTW you have two closing `` tags but no opening tags. Actually it is not really that necessary since you're not submitting any form. — threeFatCat, May 23 '17 at 21:07

score 0 · Answer 1 · answered May 23 '17 at 20:34

0

Your JavaScript code must be triggered in order to run.

This is typically done in the following manner:

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

answered May 23 '17 at 20:34

Rafael Collado

36
4

Thank for your help but it not solve the proble. If I remove this line in JS out `printWindow.document.write('');`. The preview will appear. – K.Olagon May 23 '17 at 20:39

score 0 · Answer 2 · answered May 23 '17 at 21:02

OK, I can solve the problem now. This is the solution. Just edit my 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);
        });

score 0 · Answer 3 · answered May 23 '17 at 21:05

You have to wait for the sheet to be loaded

....
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);
 ...

Why it previews blank page after added CSS?

3 Answers3