I have a component say parentComponent and it has a button downloadPDF and when I click on this button I want to download pdf from HTML code of another component say childComponent without showing it on the screen.
I had done it but it is showing the HTML code of childComponent on the screen. the thing I don't want to.
my code of childComponent is:
@Component({
selector: 'app-child',
templateUrl: '<div id="pdfData">this is small html code mine is big one</div>',
styleUrls: ['./childComponent.component.css']
})
export class childComponent implements OnInit {
constructor() { }
ngOnInit() { }
generatePDFChild() {
const elementToPrint = document.getElementById('pdfData');
const pdf = new jsPDF();
pdf.addHTML(elementToPrint, () => {
pdf.save('test.pdf');
});
}
parentComponent in which contains downloadButton:
@Component({
selector: 'app-parent',
templateUrl: '<app-child></app-child><a (click)="generatePDFParent()">Download PDF</a>',
styleUrls: ['./parentComponent.component.css']
})
export class parentComponent implements OnInit {
@ViewChild(childComponent)
private childComponentParent: childComponent;
constructor() { }
ngOnInit() { }
generatePDFParent() {
this.childComponentParent.generatePDFChild();
}
}