I am trying to export my dynamic table data into Excel, PDF and print. But not able to understand which angular material use and npm plugins to export table data as PDF and with option Print. Would you please give suggestions and help to complete this issue?
I am able to export the data as Excel, but not able to export as PDF and still looking for Print functionality.
thank you and I am able to print the data from HTML table. Use the below code in your .ts file by passing id as I passed.
print(): void {
let printContents, popupWin;
printContents = document.getElementById('print-section').innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=auto,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>Print tab</title>
<style>
//........Customized style.......
</style>
</head>
<body onload="window.print();window.close()">${printContents}</body>
</html>`
);
popupWin.document.close();
}
public generatePDF()
{
var data = document.getElementById('contentToConvert');
html2canvas(data).then(canvas => {
// Few necessary setting options
var imgWidth = 208;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
const contentDataURL = canvas.toDataURL('image/png')
let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
var position = 0;
pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
pdf.save('MYPdf.pdf'); // Generated PDF
});
}
By using above function, we can convert the table data into pdf. and pass an id to you table. ....
If you're using a Mat-Table to store your data, the following will definitely help you: Note: On Button Click downloadPdf() will function.
import 'jspdf-autotable';
import * as jsPDF from 'jspdf';
constructor(){}
ngOnInit(){}
documentHeaders = [
'Work Order #',
'Product #',
'Asset',
'Operator',
'Task Name',
'Target Minute',
'Actual Minute',
'Productivity %',
'Status',
'Start Time',
'End Time'
];
functionCall(){
//will return an array with data which is to be displayed}
downloadPDF() {
doc.text('Some Text here ', 10, 10);
const head = [this.documentHeaders];
let tableArray = new Array();
let data = this.functionCall('PDF');
let header: string;
header = 'Shift Summary ' + formatDate(this.tDate, 'yyyy/MM/dd', 'en');
console.log(header);
const doc = new jsPDF();
doc.text(header, 10, 10);
((doc as any).autoTable as AutoTable)({
head: head,
body: data,
theme: 'grid',
styles: {
overflow: 'visible',
cellWidth: 17,
minCellWidth: 17
// fillColor: [255, 0, 0]
},
headStyles: {
cellWidth: 17,
minCellWidth: 17
},
didDrawCell: data => {
console.log(data.column.index);
}
});
doc.save(header + '.pdf');
}
for exporting table to Excel you can refer to this
and for Print, you can use javascript code in ts:
this works for reactive form "this.formName.getValue()"
but if you are using the traditional way
you just need to pass formvalue to variable "a"
rest you can get value in document.write(${a.name})
print(formValue){
let popupWin;
let a: type = JSON.parse(JSON.stringify(formValue));
popupWin = window.open('', '_blank',
'top=0,left=0,height=100%,width=auto,toolbar=no,titlebar=no');
popupWin.document.open();
popupWin.document.write(`<html> <head>
</head><body onload="window.print();window.close()">
heya !! ${{ a }}
</body> `)
}
you can use typescript code within HTML.
