I have an invoice page here in my angular application on which am trying to use html2canvas and jsPdf to convert the html into pdf and download. When am downloading the right side of the pdf is showing with that grey color, but when am inspecting the page and going to device toolbar then while downloading it has no problem at all. Please help, any help would be appreciated. Here is my code below :
public downloadInvoice(){
let invoice = document.getElementById('invoice-detail');
html2canvas(invoice).then((canvas)=>{
console.log(canvas);
let imgData = canvas.toDataURL('image/png');
let doc = new jsPDF('p', 'mm', 'a4');
let imgHeight = canvas.height * 208 / canvas.width;
console.log(imgHeight);
doc.addImage(imgData, 'PNG', 0, 0, 208, imgHeight)
doc.save('invoice.pdf');
})
}
<div class="card invoice-preview-card" id="invoice-detail">
That's my container for the entire invoice section.