Question

我需要打印html，所以我按需要打印的方式进行布局。但是，当我单击print button并转到打印预览时，布局都弄乱了。请在下面查看我的代码：

以html

<div id="print-section" *ngIf="propertyLedger">
  <h2>SOSA | PMIS</h2>
  <hr>
  <table class="table borderless">
      <tr>
          <th class="col-md-2">Transaction Date</th>
          <td>{{dateToday | date}}</td>
        </tr>
    <tr>
      <th class="col-md-2">Collecting Agent</th>
      <td>{{propertyLedger.CollectinAgentName}}</td>
    </tr>
    <tr>
      <th class="col-md-2">Unit Name</th>
      <td>{{propertyLedger.UnitName}}</td>
    </tr>
    <tr>
      <th class="col-md-2">Payment Type</th>
      <td>{{propertyLedger.PaymentType}}</td>
    </tr>
    <tr>
      <th class="col-md-2">O.R. Number</th>
      <td>{{propertyLedger.ORNumber}}</td>
    </tr>
    <tr>
      <th class="col-md-2">Remarks</th>
      <td>{{propertyLedger.Remarks}}</td>
    </tr>
  </table>
  <hr>
  <h3>Details</h3>
  <hr>
</div>
    <button 

class="btn btn-primary" (click)="print()">Print</button>

ts文件中的

print() {
    let printContents, popupWin;
    printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    popupWin.document.write(`
        <html>
        <head>
            <title>Print tab</title>
            <style>
            //........Customized style.......
            </style>
        </head>
    <body onload="window.print();window.close()">${printContents}</body>
        </html>`
    );
    popupWin.document.close();
}

在我的布局中 当我单击打印=>

在我的打印预览中
表格左半部分的文字似乎位于中间。你能帮我这个忙吗？如果您有一种方法可以在没有任何表格的情况下获得所需的布局，那将是最好的！非常感谢。

Answer 1

只需阅读一下。 HTML中的默认值具有这些属性。

th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
    text-align: center
}

您必须将其更改为以下内容：

th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
    text-align: left;
}

此外，如果您不使用HTML5，也可以将标签制作如下：

<th align="left" class="col-md-2">Unit Name</th>

打印预览显示的布局不正确

1 个答案: