html() method creates blank pages or strange spaces

[mightymietz]

When I create a pdf like this:

var pdf = new jsPDF('l', 'mm', 'a4');
var rendererDiv = document.createElement("div");
rendererDiv.textContent = "test text";
    pdf.html(rendererDiv, {
            callback: function()
            {
                //            pdf.save("test.pdf");

                window.open(pdf.output('bloburl')); // to debug
            },
        });

I get a the attached output.
49d38aa4-0f6d-4581-ae76-5ff7c8b0ad37.pdf

No matter what I put in there (ul, li, etc.) it will generate strange blank pages or paddings.

[HackbrettXXX]

What happens if you use html2canvas directly with the same input? To find out if this is a bug of jsPDF or html2canvas.

[mightymietz]

you mean like this?

   var pdf = new jsPDF('l', 'mm', 'a4');
       var rendererDiv = document.createElement("div");
       document.body.appendChild(rendererDiv);
       rendererDiv.textContent = "test text";

       html2canvas(rendererDiv).then(canvas => {
           document.body.appendChild(canvas);
       });

It outputs it just fine:

When I try to export it to pdf I get an empty page

html2canvas(rendererDiv).then(canvas => {
         var strMime = "image/jpeg";
         let imgData = canvas.toDataURL(strMime);
         pdf.addImage(imgData, 0, 0, rendererDiv.clientWidth, rendererDiv.clientHeight);
         window.open(pdf.output('bloburl')); // to debug
     });

empty_pdf.pdf

[mightymietz]

Any chance that this could be fixed ASAP?

[HackbrettXXX]

I'm currently very busy, so you will probably have to wait a few weeks. But you may provide a pull request. This is an open source project after all.

[aldd-dpulidog]

I'm having the same problem, is there any workaround yet?

[alexey13]

Try to add styles to your pdf elements. Use pt in config

const globalStyle = `
  .pdf {
  	width: 470px;
  	margin: 60px;
  }
`;
const doc = new jsPDF({ unit: 'pt' });

[kakugiki]

I am not sure this is the right way to use html.js. Anyway, I only get one blank page. And it's probably not JsPDF's problem. Tried to log the element and it's seems that the div that sent to jspdf is empty.

` var pdf = new jsPDF('l', 'mm', 'a4');
var rendererDiv = document.createElement("div");
rendererDiv.innerHTML = "test text";
rendererDiv.setAttribute('id', 'test');
var x = document.getElementsByTagName("div");
var y = document.getElementById("test");

	console.log('rendererDiv: ');
	console.log(rendererDiv);
	console.log('document.getElementsByTagName("div"): ');
	console.log(x);
	console.log('document.getElementById("test"): ');
	console.log(y);`

I add an alert() so I can pause the function. Before I hit okay, console logged this

After the alert window disappeared, the rendererDiv shows up.

You can tell, document.getElementsByTagName("div") is still empty, and document.getElementById("test") always returns null

[HackbrettXXX]

So we can close this?