i am standing on component.ts file, and i am generate table tr and td th like this which is show in code blow.
so i wana print data with formated so is this write style. this code is working but print data is not formated data is displaying like text style, plz help
What I have tried:
import { Component } from '@angular/core';
import { PaginationInstance } from 'ngx-pagination'
import { DatePipe } from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
public columns = [];
public rows = [];
}
constructor() {
this.columns = [
{
caption: 'First Name',
fieldname: 'firstname',
},
{
caption: 'Last Name',
fieldname: 'lastname',
},
{
caption : 'Age',
fieldname:age,
}
];
this.rows = [
{
firstname: "john",
lastname: "sunny",
age:25
},
{
firstname: "jack",
lastname: "son",
age:20
}
];
}
print(): void {
let printContents, popupWin;
debugger;
var div
var table: HTMLTableElement = <HTMLTableElement>document.createElement("TABLE");
var row = table.insertRow(-1);
table.setAttribute("border", "2px");
this.columns.forEach(element => {
var headerCell = document.createElement("TH");
headerCell.innerHTML = element.caption;
row.appendChild(headerCell);
headerCell.className = "innertable";
});
var row = table.insertRow(-1);
this.rows.forEach(element => {
this.columns.forEach(col => {
var Cell = document.createElement("TD");
Cell.innerHTML = element[col.fieldname];
row.appendChild(Cell);
Cell.className = "innertable";
});
});
row.setAttribute("border", "2px");
debugger;
printContents = table.innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
$(document).ready(function () {
table.setAttribute("border", "2px");
popupWin.document.write(`
<html>
<body onload="window.print();window.close()">${printContents}
</body>
</html>`
);
popupWin.document.close();
});
}
Submit an article or tip