html: add width option

[HackbrettXXX]

Currently, there is no easy way to specify the desired width of the html in the PDF. The width can only be specified indirectly over html2canvas' scale option (similar to #2917). It would be very convenient, if we could simply supply a width (in PDF units) to the html method. This option should basically function like the width of a browser window (which means, it should not scale the content).

[hmajid2301]

I can pick this up!

[HackbrettXXX]

@hmajid2301 that would be really great!

One thought: the default value should be the width of the current page.

[hmajid2301]

Sorry I'm afraid I won't be able to pick this up any more.

Thanks

[helpsdev]

Hi there, I'm a first-time contributor, any chance I can work on this?

[rubiin]

can i take this?

[HackbrettXXX]

@helpsdev you can try ;) I'm assigning you for now.

@rubiin Maybe you two can collaborate?

[KamranMaqbool]

@HackbrettXXX any updates about this issue?

[HackbrettXXX]

@KamranMaqbool ask the two assignees ;)

[vbinithyanandamv]

can i try this?

[HackbrettXXX]

Since the others didn't make a contribution, sure go ahead ;)

[vbinithyanandamv]

@HackbrettXXX can you point some direction on this one?

[HackbrettXXX]

@vbinithyanandamv I would assume, we can just pass the correct width or windowWidth options to html2canvas. We probably need to consider the internal.scaleFactor to convert the PDF unit to pixels. I hope this does the trick. Maybe we also need to set the width of the canvas.js module.

[richard-lopes-ifood]

Updates?

[ajhalls]

Here is how I did it. I am leveraging jQuery, so not sure how much you want to implement it.

    var pdf = new jspdf.jsPDF({
      orientation: "portrait",
      format: 'letter',
      customScaling:600/$($(".elementToPrint")[0]).width()
    });

Required adding a few lines in jsPDF.js right after the switch statement where you are checking what units are being used:

	if(options.customScaling){
		scaleFactor=options.customScaling;
	}

It will now dynamically scale to fit the width of your element.

[Flavsditz]

I would like something a bit more straight-forward but here is the solution I have: (I am also using jQuery for this test)

        const doc = new jsPDF("p", "pt", [500, 600]);
        const source = $("#element-to-print")[0];

        doc.html(
            source,
            {
                callback: (docWithHtml) => {
                    docWithHtml.save("Test.pdf")
                },
                width: 500,
                windowWidth: $(source).width()
            }
        );

This was inspired by the answer from @ajhalls. This makes the content scale to the width, however, I don't think this is a perfect solution since it leads to white space on the bottom of the page and it needs some tweaking, but it was the best way of allow my responsive components to fit on the page

[Flavsditz]

I wanted to share a second solution that I found. I wanted the PDF to have a precise size, and at this size, I had a perfect arrangement of my components. So what I did was to simply re-scale the container to the desired size, print, and erase that scaling. Since the change of the width happens as a style attribute on the tag, I simply remove the style tag, but it could be fine-tuned to just remove the attribute width I guess...

        const doc = new jsPDF("p", "pt", [500, 500]); //format: will take bigger as height, smaller as width IF on portrait mode (otherwise if on landscape)
        const source = $("#telement-to-print");

        source.innerWidth(500);

        doc.html(
            source[0],
            {
                callback: (docWithHtml) => {
                    docWithHtml.save("Test.pdf")

                    source.removeAttr("style");
                },
            }
        );