jsPDF showing different color when downloading normally but it's fine in inspect mode

user_18083532 0
Viewed 121

enter image description here

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.

responsive-design jspdf angular html javascript
1 Answers

After adding

{scale : 2}

solved my problem. Try this :

public downloadInvoice(){
    let invoice = document.getElementById('invoice-detail');
    html2canvas(invoice,{scale:2}).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');
    })
  }
user_164385430
Related