Question

我需要使用自定义布局创建收据的打印预览，并最终进行打印。但是我的问题是；当我在打印预览中查看它时，它的渲染方式与单击“打印预览”按钮之前创建的版式不同。在我使用表格元素的部分中，在我的布局中，我得到了想要的布局，但是在打印预览中，表格缩小了。请在下面查看我的html代码：

<div id="print-section" *ngIf="propertyLedger">
  <h2>SPMIS</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" style="text-align: left;">Collecting Agent</th>
      <td>{{propertyLedger.CollectinAgentName}}</td>
    </tr>
    <tr>
      <th class="col-md-2" style="text-align: left;">Unit Name</th>
      <td>{{propertyLedger.UnitName}}</td>
    </tr>
    <tr>
      <th class="col-md-2" style="text-align: left;">Payment Type</th>
      <td>{{propertyLedger.PaymentType}}</td>
    </tr>
    <tr>
      <th class="col-md-2" style="text-align: left;">O.R. Number</th>
      <td>{{propertyLedger.ORNumber}}</td>
    </tr>
    <tr>
      <th class="col=md-2" style="text-align: left;">Amount</th>
      <td>{{ sumPayment() | currency: 'PHP ' }}</td>
    </tr>
    <tr>
      <th class="col-md-2" style="text-align: left;">Remarks</th>
      <td>{{propertyLedger.Remarks}}</td>
    </tr>
  </table>
  <hr>
  <h3>Details</h3>
  <table class="table borderless" *ngIf="PropertyLedgerDetails">
    <thead>
      <tr>
          <th class="col-md-2" style="text-align: left;">Transaction Type</th>
          <th class="col-md-2" style="text-align: left;">Amount</th>
          <th class="col-md-2" style="text-align: left;">Month</th>
          <th class="col-md-2" style="text-align: left;">Year</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let pd of PropertyLedgerDetails">
        <td>{{pd.TransactionType}}</td>
        <td>{{pd.Amount | currency: 'PHP '}}</td>
        <td>{{pd.Month}}</td>
        <td>{{pd.Year}}</td>
      </tr>
    </tbody>
  </table>
  <hr>
</div>
<br>
<button mat-raised-button color="default" class="btn pull-right" (click)="print()">Print</button>

打印预览之前

一旦我点击“打印预览”按钮（“打印”），我就会得到：

您能告诉我如何做到这一点吗？非常感谢您的帮助。

编辑我创建了这样的CSS

 @media screen, print {
        table {
          table-layout: fixed;
          width: 100%;
          border-collapse: collapse;
          border: 3px solid purple;
        }

        thead th:nth-child(1) {
          width: 50%;
        }

        thead th:nth-child(2) {
          width: 20%;
        }

        thead th:nth-child(3) {
          width: 15%;
        }

        thead th:nth-child(4) {
          width: 15%;
        }

        th, td {
          padding: 20px;
        }
      }

我必须在需要打印html的部分中添加此样式。

Answer 1

您能否提供更多有关不相同之处的详细信息？根据正在运行的示例，当您单击打印时，打印预览显示...它们看上去很接近我。

@media screen,
print {
  table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border: 3px solid purple;
  }
  thead th:nth-child(1) {
    width: 50%;
  }
  thead th:nth-child(2) {
    width: 20%;
  }
  thead th:nth-child(3) {
    width: 15%;
  }
  thead th:nth-child(4) {
    width: 15%;
  }
  th,
  td {
    padding: 20px;
  }
}

<div id="print-section" *ngIf="propertyLedger">
  <h2>SPMIS</h2>
  <hr>
  <table class="table borderless">
    <tr>
      <th class="col-md-2" style="text-align: left;">Transaction Date</th>
      <td>{{dateToday | date}}</td>
    </tr>
    <tr>
      <th class="col-md-2" style="text-align: left;">Collecting Agent</th>
      <td>{{propertyLedger.CollectinAgentName}}</td>
    </tr>
    <tr>
      <th class="col-md-2" style="text-align: left;">Unit Name</th>
      <td>{{propertyLedger.UnitName}}</td>
    </tr>
    <tr>
      <th class="col-md-2" style="text-align: left;">Payment Type</th>
      <td>{{propertyLedger.PaymentType}}</td>
    </tr>
    <tr>
      <th class="col-md-2" style="text-align: left;">O.R. Number</th>
      <td>{{propertyLedger.ORNumber}}</td>
    </tr>
    <tr>
      <th class="col=md-2" style="text-align: left;">Amount</th>
      <td>{{ sumPayment() | currency: 'PHP ' }}</td>
    </tr>
    <tr>
      <th class="col-md-2" style="text-align: left;">Remarks</th>
      <td>{{propertyLedger.Remarks}}</td>
    </tr>
  </table>
  <hr>
  <h3>Details</h3>
  <table class="table borderless" *ngIf="PropertyLedgerDetails">
    <thead>
      <tr>
        <th class="col-md-2" style="text-align: left;">Transaction Type</th>
        <th class="col-md-2" style="text-align: left;">Amount</th>
        <th class="col-md-2" style="text-align: left;">Month</th>
        <th class="col-md-2" style="text-align: left;">Year</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let pd of PropertyLedgerDetails">
        <td>{{pd.TransactionType}}</td>
        <td>{{pd.Amount | currency: 'PHP '}}</td>
        <td>{{pd.Month}}</td>
        <td>{{pd.Year}}</td>
      </tr>
    </tbody>
  </table>
  <hr>
</div>
<br>
<button mat-raised-button color="default" class="btn pull-right" onclick="window.print()">Print</button>

打印预览更改html布局

1 个答案: