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>

[GGBond99999]

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

[MohamedLamineAllal]

just uninstall html2canvas and install html2canvas@1.0.0-rc.1 this will solve empty pages and strange spacing between text

late 2024, I'm using html2canvas 1.4.1 version
Safari 17.1

'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js'

Always the same problem. Works without Grammarly ✅, doesn't with it ❌

Funny enough Grammarly here showing while writing this

Here is my pdf generation function

function generatePDF() {
	// Parent flex container
	const pdf_el = document.createElement('div');
	// Gap setting
	pdf_el.setAttribute('class', 'flex flex-col gap-4');

	// Adding Logo image on the top
	const logo_img_container = document.createElement('div');
	logo_img_container.setAttribute('class', 'h-12');
	const logo_img = document.createElement('img');
	logo_img.setAttribute('class', 'h-full object-contain');
	logo_img.src = logo_image_base_64;
	logo_img_container.append(logo_img);
	pdf_el.append(logo_img_container);

	// Select elements with the 'pdf' class within Result container
	let pdfElements = document.querySelectorAll('.pdf');

	// Adding those selected elements to the pdf (cloned)
	pdf_el.append(...Array.from(pdfElements).map((dom) => dom.cloneNode(true)));

	// Create a new jsPDF instance
	let doc = new jspdf.jsPDF();

	doc.html(pdf_el, {
		callback: function (doc) {
			// Save the PDF
			doc.save('search_result.pdf');
		},
		margin: [10, 0, 10, 0],
		x: 10, // Adjust the left margin
		y: 1, // Adjust the top margin
		width: 190, // target width in the PDF document (210mm - 20mm total margins)
		windowWidth: 650, // window width in CSS pixels
		autoPaging: 'text',
	});
}

EDIT (Solution and explanation):

Apparently, i didn't read well. So basically the older versions of html2canvas doesn't have such a conflicting problem. As suggested here #3370 (comment) and in html2canvas issues like here:
niklasvh/html2canvas#2792 (comment)

And one can fix the issue in 1.4.1 with
niklasvh/html2canvas#2792 (comment)

There seems to be an issue with Grammarly and the Shadow DOM, so in order to workaround it, you need to skip the elements which are not properly created:

function fnIgnoreElements(el: any) {
  return typeof el.shadowRoot === "object" && el.shadowRoot !== null
}

const canvas = await html2canvas(input, {
	ignoreElements: fnIgnoreElements,
})

My testing

✅ Downgraded to 1.3.2. Without changing my code at all. Worked right away
In my case, that was outputting things similarly to 1.4.1. So i wonder if it's ok cross all browsers, and what are the differences between 1.4.1 and such an older version. It seems good for my use case.

✅ I went though with the 1.4.1 and the ignoreElements() way

You need to pass

html2canvas: {
	ignoreElements(el) {
		return typeof el.shadowRoot === 'object' && el.shadowRoot !== null;
	},
},

My whole function becomes

function generatePDF() {
	// Parent flex container
	const pdf_el = document.createElement('div');
	// Gap setting
	pdf_el.setAttribute('class', 'flex flex-col gap-4');

	// Adding Logo image on the top
	const logo_img_container = document.createElement('div');
	logo_img_container.setAttribute('class', 'h-12');
	const logo_img = document.createElement('img');
	logo_img.setAttribute('class', 'h-full object-contain');
	logo_img.src = logo_image_base_64;
	logo_img_container.append(logo_img);
	pdf_el.append(logo_img_container);

	// Select elements with the 'pdf' class within Result container
	let pdfElements = document.querySelectorAll('.pdf');

	// Adding those selected elements to the pdf (cloned)
	pdf_el.append(...Array.from(pdfElements).map((dom) => dom.cloneNode(true)));

	// Create a new jsPDF instance
	let doc = new jspdf.jsPDF();

	doc.html(pdf_el, {
		callback: function (doc) {
			// Save the PDF
			doc.save('search_result.pdf');
		},
		margin: [10, 0, 10, 0],
		x: 10, // Adjust the left margin
		y: 1, // Adjust the top margin
		width: 190, // target width in the PDF document (210mm - 20mm total margins)
		windowWidth: 650, // window width in CSS pixels
		autoPaging: 'text',
		html2canvas: {
			ignoreElements(el) {
				return typeof el.shadowRoot === 'object' && el.shadowRoot !== null;
			},
		},
	});
}

[sjia0307]

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.

I had the same problem with Firefox, where I simply multiplied the width and height by a random number
pdf.addImage(imgData, "JPEG", 0, 0, pageWidth * 1.0, pageHeight * 1.0);