The jsPDF html module generates a blank page when the browser has Grammarly extension

[huylethanh]

I am using jsPdf v2.5.0 to create pdf from html. use doc.html() method. doc.html(html).then(value => { doc.save(sample.pdf); });

I got the issue when i turn on the grammarly extension in chrome. the downloaded file is blank. if i turn it off. the download file works.

Can you please take a look at this issue.

[dilesht]

Banged my head trying to figure out why this started happening suddenly. Didn't think it was due to Grammarly. Thanks, I know that my code is not broken now. Do you know if this issue persists in older versions of jsPDF as well?

[HackbrettXXX]

What is the output of html2canvas with Grammarly?

If this issue only occurs with Grammarly, maybe Grammarly is doing something wrong. Can you reproduce the issue without Grammarly?

[rajathegde98]

I also faced the same issue. When Grammarly is installed we get empty PDF. After uninstalling Grammarly extension it works fine. Looks like the issue persists with all the versions.

doc.html(document.getElementById("invoice"), {
         callback: function (doc) {
           const filename = new Date(date).toDateString() + "invoice.pdf"
           doc.save(filename);  }
       });

[ezequielhernancasas]

I have the same issue:

const element = document.getElementById("printScreen");
      html2canvas(element, {
        dpi: 300,
      })
      .then((canvas) => {
        var imgData = canvas.toDataURL("image/jpeg");
        var pdf = new jsPDF("p", "mm", "a4");
        const pageWidth = pdf.internal.pageSize.getWidth();
        const pageHeight = pdf.internal.pageSize.getHeight();
        pdf.addImage(imgData, "JPEG", 0, 0, pageWidth, pageHeight);
        pdf.save("Test.pdf"); 
      });

I dont know if change any name or if is an issue, but return in blank page.

[rajathegde98]

//content is the angular child elem reference (if not, use **document.** methods to access div or class)
        html2canvas(content,{
          allowTaint:true,
          useCORS:true,
          scale:1
        }).then(canvas=>{
         // document.body.appendChild(canvas)
          var width = canvas.width;
          var height = canvas.height;
          var img = canvas.toDataURL("image/png")
          var doc = new jsPDF();
          doc.addImage(img,'PNG',0,0,600,200)
          doc.save()
        })

The above code looks fine. It's working for me, update the hardcoded values(width, height). I am using jsPDF and html2canvas instead.
The issue is with .html method so use .addImage. hope this helps you.

[MarinaFernandes]

I have the same problem in my project and it reflects on our users who are also using the Grammarly extension. We are using .html and 2.4.0 jspdf version.

[HackbrettXXX]

A pull request would be very welcome.

[waqasdilawar]

@HackbrettXXX Do you have any updates on this bug?

[kakugiki]

Hmm, it seems working fine to me. Chrome is up to date, Version 100.0.4896.127 (Official Build) (64-bit); Grammarly for Chrome 14.1057.0. I tried both regular and incognito modes, and I am using Grammarly to enter this comment. :) Both open and save worked.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"
        integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    
    <script>
        window.jsPDF = window.jspdf.jsPDF;
        function download() {
            let pdf = new jsPDF('p', 'pt', 'a4');
    
            pdf.html(document.getElementById('toPDF'), {
                callback: function (pdf) {
                    window.open(pdf.output('bloburl'));
                }
            });
        }
    </script>

[BlueClouDragon]

just uninstall html2canvas and install [email protected] this will solve empty pages and strange spacing between text

[Xin-789]

try pdf.deletePage(1); for (let i = 0; i < pageCount; i++) { pdf.addPage(); pdf.addImage(); }