当我在angular2中将表格样式化为pdf时，如何打印html格式？答案

【问题标题】：How to print html format while i have styled table into pdf in angular2?当我在angular2中将表格样式化为pdf时，如何打印html格式？
【发布时间】：2017-07-09 12:16:40
【问题描述】：

这是在我尝试实现时，我想将生成的数据导出到 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 一样打印？或者至少我可以让桌子整洁，我不希望打印时显示 url

更新：我用引导 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();
}

这里是打印结果：

第六列合并为第一、第二、第三和第四列，我怎样才能让它像我的桌子一样？

当我使用 firebug 检查 css 时，我看到我的 colspan 行是空的，这是使用 firebug 时的样子：

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

【问题讨论】：

标签： javascript html css angular pdf

【解决方案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，样式表是.scss，如何指定scss路径？
需要指定编译后的.css版本，因为浏览器无法解析.scss文件
我已经用 bootstrap css 添加了 css，但是表格还是不好，你能帮我 css 吗？所以打印页表很整洁，循环仍然与第一列和第二列合并，我更新了我的问题中的结果
@KeVin 您需要将样式表插入打印功能。如果它不起作用，请提供您当前不起作用的代码。
我刚刚用我遇到的问题更新了我的问题，在我追踪为什么表格的样式不像源代码之后，我更新了我的问题中的问题