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 :
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 :
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 :
the result should looked like the first row, the original HTML is just like i posted above. Why the out from my
