Question

我正在用棱角分明的材料创建电子版challan页面。
这是我的html页面html page here

在html页面上看起来正确

这是我的打印页面print page here
在打印页面上看起来不正确。
区域银行帐号未在打印页面上正确显示

<div class="billing-address" fxLayout="row" fxLayoutAlign="space-between">
</div>
<div>
  <h4><strong>Banking Details:</strong></h4>
</div>
<div>
  <h5>Details for the RTGS/NEFT Transaction</h5>
</div>
<table style="width:100%">
  <div style="overflow: hidden;">
    <h4 style="float: left;padding: 8px;">Bank Account No: </h4>
    <tr>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
    </tr>
  </div>
  <div style="overflow: hidden;">
    <h4 style="float: left;padding: 8px;">Account Name : </h4>
    <p style="text-align:justify;padding: 6px;"> AMC ADVERTISEMENT RIGHT</p>
  </div>
  <div style="overflow: hidden;">
    <h4 style="float: left;padding: 8px;">IFSC Code : </h4>
    <p style="text-align:justify;padding: 6px;"> ICIC0000106</p>
  </div>
  <div style="overflow: hidden;">
    <h4 style="float: left;padding: 6px;">Account Bank : </h4>
    <p style="text-align:justify;padding: 8px;"> ICICI Bank</p>
  </div>
</table>

Answer 1

对于打印，有一些特殊的要求以css编写。 @media print {}

Answer 2

您的html

<div id="printId" class="billing-address" fxLayout="row" fxLayoutAlign="space-between">
</div>
<div>
  <h4><strong>Banking Details:</strong></h4>
</div>
<div>
  <h5>Details for the RTGS/NEFT Transaction</h5>

</div>
<table style="width:100%">
  <div style="overflow: hidden;">
    <h4 style="float: left;padding: 8px;">Bank Account No: </h4>
    <tr>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
      <td Width="50%">A</td>
    </tr>


  </div>
  <div style="overflow: hidden;">
    <h4 style="float: left;padding: 8px;">Account Name : </h4>
    <p style="text-align:justify;padding: 6px;"> AMC ADVERTISEMENT RIGHT</p>
  </div>
  <div style="overflow: hidden;">
    <h4 style="float: left;padding: 8px;">IFSC Code : </h4>
    <p style="text-align:justify;padding: 6px;"> ICIC0000106</p>
  </div>
  <div style="overflow: hidden;">
    <h4 style="float: left;padding: 6px;">Account Bank : </h4>
    <p style="text-align:justify;padding: 8px;"> ICICI Bank</p>
  </div>


</table>

在ts文件中

 print(): void {
            let printContents, popupWin;
            printContents = document.getElementById('printId').innerHTML;
            popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
            setTimeout(()=> {
                popupWin.document.open();
                popupWin.document.write(`
         <html>
            <head>
              <style>           @media print {   @page { margin:21px 35px 35px 35px}   body { padding: 200px;margin: 200px;zoom:72%}  } </style>

            </head>
    // This will bring your css file from your header.
             ${document.querySelector('head').innerHTML}
        <body onload="window.print();window.close()">${printContents}</body>
          </html>`
                );
                popupWin.document.close();
            },10);
        }

您只需打印您的显示内容即可。甚至是CSS。

打印同一页时页面无法正确显示

2 个答案: