CODEWITHSUNDEEP
javascripthtmlcssangularpdf
Ke Vin
Ke Vin

Reputation: 3760

How to print html format while i have styled table into pdf in angular2?

here is while i trying to achieve, i want to export my data that generated to html table, but i think the style is gone, how can i print neat table while my html table is looked like this :

<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>

and here is the 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();
}

here is the HTML looked like : enter image description here

its like not formated, how can i print exactly like just like the html? or at least i can make the table neat, and i dont want the url showed when print

UPDATE : i update my code with bootstrap css, so my code that looked like this, in my 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();
}

and here is print the result : enter image description here

the sixth column is combined in to first, second, third and fourth column, how can i make it just like my table?

when i do inspect the css with firebug, i see my colspan row is empty, here is how it looked like with firebug : enter image description here

the result should looked like the first row, the original HTML is just like i posted above. Why the out from my

Upvotes: 2

Views: 3617

Answers (1)

Deividas
Deividas

Reputation: 6507

Adding style

You get an unstyled version, because in your print() function you do not include the styles. See your modified example:

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();
}

Removing page link

To remove the link from the top of the page follow instructions on this post: Disabling browser print options (headers, footers, margins) from page?

Upvotes: 2

Related Questions