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>

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>

• javascript
• html
• pdf
• jspdf
• html2canvas

3 Answers 3

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.

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.

I don't know exactly about jspdf is, but it seems you've miss spelled on

var legend = document.getElementsById("my-table");

here.

var legend = document.getElementById("my-table");

and maybe, you could resize those tables via css or style attribute.

<table style="width:200;">
    <tr>
        <td><img src="image1.jpeg"></td>
    </tr>
    <tr>
        <td><img src="image2.jpeg"></td>
    </tr>
    ...
</table>

using css

#my-table {
 width:200;
}