Resize html before exporting to pdf with jspdf .html() method

Question

I am trying to figure out how to resize a HTML element with jsPDF .html() method.

I tried with the code below but the width option does not seem to make any change in the output.

I am just assuming width is an option of .html() as unfortunately, as of now, there's no documentation to this method and one is supposed to guess it from the code.

Also, it seems to me it should takes the option from the html2canvas options, that's why I tried with width.

Anyway, the code:

var legend = document.getElementById("my-table");
var pdf = new jsPDF(orientation, undefined, format);
pdf.html(legend, {
    width: 200,
    callback: function () {
        window.open(pdf.output('bloburl'));
     }
});

#my-table

<table>
    <tr>
        <td><img src="image1.jpeg"></td>
    </tr>
    <tr>
        <td><img src="image2.jpeg"></td>
    </tr>
    ...
</table>

Solution 1

Passing options to html2canvas:

pdf.html(legend, {
    html2canvas: {
        // insert html2canvas options here, e.g.
        width: 200
    },
    callback: function () {
        // ...
    }
});

For me, the option scale works fine for resizing. You can retrieve the default page dimensions listed in the source to calculate the required scaling factor.

Solution 2

I didn't find a way to resize HTML objects. Instead, you can change the measurement unit from mm (default) to pt. This will reduce all sizes to about 1/3 from the original. For example:

doc = new jsPDF('portrait', 'pt', 'a4');

IMPORTANT: any other objects (i.e. text, lines, etc) will reduce too, in size and position. So be careful.

Comments

[umbe1987]

Thanks. I will change the mispelled code. Anyway, the problem is I don't want to resize the table via css because as long as jsPDF converts it to PDF, it will however try to fit to the page size.

[Oh Wan Sik]

@umbe1987 okay, or you could fixing width and height of your document, and layout all stuff. just theory though... and I found html documentation. check here rawgit.com/MrRio/jsPDF/master/docs/module-html.html#~html

[umbe1987]

Thanks again. I know that page of the documentation, but if you look at it, there's no desription for the options except "An object of optional settings."

[umbe1987]

Thanks. Tried with scale:0.5 and worked fine. Accepted.

[Hyfy]

What is the image option?