时间戳

首页 > 解决方案 > 打印预览未显示正确的布局

html - 打印预览未显示正确的布局

问题描述

我需要打印我的 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();
}

在我的布局 在此处输入图像描述 中，只要我点击打印 =>

在我的打印预览 中，表格左侧的文本似乎居中。你能帮我解决这个问题吗？如果您有办法在没有任何表格的情况下获得我想要的布局，那将是最好的！太感谢了。在此处输入图像描述

标签： htmlcss

解决方案

刚读完。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>

推荐阅读