Question

这里是我试图实现，我想将生成的数据导出到html表，但我认为样式已经消失，我怎么能打印整齐的表，而我的html表看起来像这样：

<button (click)="print()">print</button>

    <div id="print-section">
    <div class="row">
        <div class="col-md-12">
            <ba-card title="Result" baCardClass="with-scroll table-panel">
            <!-- Hasil -->
                <div class="table-responsive">
                <table class="table">
                    <tr>
                        <td>No</td>
                        <td>Kode Claim</td>
                        <td>Paid/Not Paid</td>
                        <td>Kode Service</td>
                        <td>Tanggal</td>
                        <td>Nomor Nota</td>
                        <td>Kode Produk</td>
                        <td>Kerusakan</td>
                        <td>Biaya</td>
                        <td>Transport</td>
                        <td>Valid</td>
                    </tr>
                    <tr *ngFor="let claimReports of claimReport; let i=index" >
                        <td>{{i + 1}}</td>
                        <td>{{claimReports.KODE_CLAIM}}</td>
                        <td>{{claimReports.Paid}}</td>
                        <td colspan="11">
                            <tr *ngFor="let dt of claimReports['DETAILS']; let a=index">
                                <td>{{dt.Kode_Service}}</td>
                                <td>{{dt.Tanggal_Service | date: 'dd/MM/yyyy'}}</td>
                                <td>{{dt.Nomor_Nota}}</td>
                                <td>{{dt.Kode_Produk}}</td>
                                <td>{{dt.Kerusakan}}</td>
                                <td>{{dt.Biaya}}</td>
                                <td>{{dt.Transport}}</td>
                                <td>{{dt.Valid}}</td>
                            </tr>
                        </td>
                    </tr>
                </table>
                </div>
            <!-- End Hasil -->
            </ba-card>
        </div>
    </div>
    </div>

，这是app.component.ts：

  print(): void {
    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>
        </head>
    <body onload="window.print();window.close()">${printContents}</body>
      </html>`
    );
    popupWin.document.close();
}

这里的HTML看起来像：

它就像没有格式化，我怎么能像html一样打印？或者至少我可以使表整洁，我不希望打印时显示的网址

更新：我使用bootstrap css更新我的代码，所以我的代码看起来像这样，在我的app.component.ts中

  print(): void {
    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>
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        </head>
    <body onload="window.print();window.close()">${printContents}</body>
      </html>`
    );
    popupWin.document.close();
}

这里打印结果：

第六列合并到第一，第二，第三和第四列，我怎么能像我的桌子那样制作呢？

当我用萤火虫检查css时，我看到我的colspan行是空的，这是用firebug看起来的样子：

结果应该看起来像第一行，原始HTML就像我上面发布的那样。为什么要从我的

出来

Answer 1

添加样式

你得到一个没有样式的版本，因为在print()函数中你没有包含样式。请参阅修改后的示例：

print(): void {
    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>
          // You need to insert the stylesheet to the print function
          <link rel="stylesheet" href="correct href to your stylesheet"> 
        </head>
    <body onload="window.print();window.close()">${printContents}</body>
      </html>`
    );
    popupWin.document.close();
}

删除页面链接

要从页面顶部删除该链接，请按照以下帖子中的说明操作：Disabling browser print options (headers, footers, margins) from page?

如何在angular2中将表格格式化为pdf时打印html格式？

1 个答案:

添加样式

删除页面链接