时间戳

首页 > 解决方案 > 打印同一页时页面显示不正确

html - 打印同一页时页面显示不正确

问题描述

我正在用角材料创建 e-challan 页面。
这是我的 html 页面html 页面在这里

它在 html 页面上看起来很合适

这是我的打印页打印页在这里
它在打印页上看起来不正确..
部分银行帐号未正确显示在打印页上

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

标签： htmlangularprinting

解决方案

你的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。

推荐阅读