.html function seem to be broken

[sdhoddusamy]

I'm using jsPdf version 1.5.3 and html2Canvas version 1.0.0-rc1 .

When I use .html to download components of my web page into pdf the results are totally unexpected.

• It gets shockingly large font.
• The line and word spacing are too much
• Parts of the html components are cut off
• It randomly starts multiple new pages

Here is my code:
var doc = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a4'
});

doc.html(allWarnings, {
callback: function (doc) {
doc.save('web.pdf');
}
});

Please help

[alemartins414]

Same issue here. Anyone?
Any workaround @sdhoddusamy ?

[funnykanth]

even i am facing the same issue

Font size is too big

[HackbrettXXX]

Maybe related to #2781? Please test again with the current master branch.

[meain]

The master version seems to give me some error.

[bytrangle]

I'm facing the same issue as OP. If I pass this option html2canvas: {scale: myScaleValue} to the html() method, the text fitted nicely. The problem is, the scale number that I used was totally arbitrary. I have no idea how set the right scale for different HTML input.

[HackbrettXXX]

@trangthule Are you using jsPDF@2.0.0 and html2canvas@1.0.0-rc5? If yes, please share your code and html.

[kakugiki]

@trangthule you'll need to calculate the scale based on the scrollWidth, let srcwidth = document.getElementById('yourID').scrollWidth;, and your pdf page size (e.g., A4): scale: 595.28 / srcwidth -- 595.28 for A4. Adjust this accordingly.

[bytrangle]

@trangthule you'll need to calculate the scale based on the scrollWidth, let srcwidth = document.getElementById('yourID').scrollWidth;, and your pdf page size (e.g., A4): scale: 595.28 / srcwidth -- 595.28 for A4. Adjust this accordingly.

Thanks for the reply. But I don't get the formula for calculating the scale.

Here is my code on JsFiddle.

The HTML element that I want to convert to pdf is 600px. 595.28/600 = 0.9921. If I use this number, the text will still get cut off.

[kakugiki]

Which browser did you try? looks okay from my end. Well, you do have a different issue though.

doc.pdf

[bytrangle]

Which browser did you try? looks okay from my end. Well, you do have a different issue though.

doc.pdf

That example works because I had changed my scale formula:

const input = document.getElementById('html');
const srcWidth = input.scrollWidth; // 600px
const pWidth = doc.internal.pageSize.getWidth(); // It's 592.28 for A4
const scale = (pWidth - left * 2) / Math.ceil(srcWidth); // left here is 20

If I used the formula 592.28 / srcwidth, I'll get 0.9921. The text was cut off a bit.
doc.pdf

[kakugiki]

Sure, if you add the margin, you'll need to subtract that.

[bytrangle]

Sure, if you add the margin, you'll need to subtract that.

Thank you for your help. I'm getting there. And how do I set a margin? I can only set x and y. Setting a margin like [10, 10, 10, 10] doesn't seem to make an effect. I've been digging through everything regarding jspdf on Stackoverflow and I think you answered a question there in 2019 that it was not possible yet.

[bytrangle]

I tried a longer html document, and surprisingly a lot of content are lost. Here's the code at JsFiddle.
file.pdf

[github-actions]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.

[jjy05]

try to change the unit like:
var doc = new jsPDF({ orientation: 'p', unit: 'px', format: 'a4' });

[ChamkhiAnas]

@sdhoddusamy have u found any solution for this problem ?