Can't get table width to fit to page

[johnvanbreda]

Hi, I've got a page with an HTML table on it, set to 100% width on the page. I'd like to output the table into a PDF which fits the table to the width of the page and the document will create as many pages as is necessary for the whole table. My code is as follows:

html2pdf($('div.node-content')[0], {
      filename:     'myReport.pdf',
      margin:       0,
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { dpi: 192, letterRendering: true },
      jsPDF:        { format: 'a4', orientation: 'p' }
});

I've found that the table does not fit the PDF page width and a couple of columns on the right of the table are clipped off. I've experimented with the format option in the jsPDF setting as well as the margin option but I can't seem to affect this behaviour.

Any thoughts on how to do this would be much appreciated. John

[johnvanbreda]

A partial answer to my question - it seems that the table will scale to fit 100% width up to a certain size. If the table is larger than the width available then the scaling "gives up" and doesn't shrink to fit, it just clips the rightmost columns.

[eKoopmans]

Hey @johnvanbreda, really sorry I never got back to you. I've been swamped. So did you sort out the issue? What you've described (table filling the page width, and producing as many pages as necessary for all the rows) is exactly what html2pdf should produce. You're right that it can cause problems if the table's content exceeds its container's size.

[johnvanbreda]

Hi @eKoopmans, thanks for getting back to me. Yes, it seems the problem relates to the table content exceeding the container size - I was expecting this to scale the content either to increase or decrease it to fit, but it seems it will only scale up not down. I have a hack which works OK, but it is a bit messy. Basically I look at the $(table).width() value for each table and if it is over a certain width (1100px for landscape for example), I apply a CSS attribute to decrease the font size by the same ratio by which the content is too wide. I'm not convinced it is a perfect solution but it is "good enough".

[eKoopmans]

Right, I hear you. There have been a few requests for "single-page PDFs", where the entire content would be shrunk down to the page size - this might fall into that category. Or more generally, a "fit-to-width" option (which could still span multiple pages).

Currently html2pdf just restricts the page size and lets the content re-flow naturally to fit in the space. It works well for many circumstances, but it sounds like it's not perfect for yours. I'll add this to the project tracking for the single-page PDFs, might be a while until I get to it though!

[johnvanbreda]

Yes - the fit-to-width option would meet my needs. Thanks.

[fbatiga]

Hello !

i'm having the same problem !

[vietnguyen3107]

Hi, Me too. Can you release new version with the fit-to-width option as soon as possible, please!

[eKoopmans]

Hi everyone, I haven't forgotten about this, but time is short these days. I hope I'll be able to get to this soon.

[MartinHlavna]

Hello, Affects me as well

[phyzalis]

Same probleme here :)

[reserl]

same prob here! :)

[ericfurspan]

Same here

[dorsaffer]

same here

[ahmedmgh67]

Same here

[KZeni]

Just in case it helps some people, I ended up switching over to using PrintThis (https://github.com/jasonday/printThis) where it isolates content and triggers the browser's print command which then allows the visitor to save to PDF. This then doesn't suffer this issue (this issue then being important enough for me to switch over to this alternative method). I can definitely see how this then doesn't meet the needs of others since dealing with the print dialogue would be ideal to avoid so this problem should ideally be resolved within this implementation (I'd like to avoid it as well, but I found the other approach sufficient for now.)

[neldreth2021]

Anyone mind giving me an example for fit-to-width? Is this a CSS option I need to include in my container styling, or a configuration option for underlying jsPDF?

[aGitForEveryone]

Is there any update on this topic? The image is still not resized to fit the width of the specified jsPDF format (A4 in my case). It fits the height of 2 pages exactly though, but the width overflows.

[aGitForEveryone]

I found a solution for this problem. You need to set the width property in html2canvas. Find out the width of your element in pixels and pass that to html2canvas, something like:

html2canvas:  { width: element_width_in_pixels },

[IngridCosovan]

Hello! This is what worked for me is (but the solution is feasible because I don't need it portrait, and the format is just for view mode, when you actually print it you select A4): jsPDF: {orientation: 'landscape', format: 'a3'}

[KGESH]

@> Hello! This is what worked for me is (but the solution is feasible because I don't need it portrait, and the format is just for view mode, when you actually print it you select A4): jsPDF: {orientation: 'landscape', format: 'a3'}

Thanks! that worked for me.

const option = {
            margin: 1,
            image: {type: 'jpeg', quality: 0.98},
            html2canvas: {scale: 2},
            pagebreak: {mode: 'avoid-all'},
            jsPDF: {unit: 'mm', format: 'a3', orientation: 'p'}

        };

html2pdf().set(option).from(source).toPdf().save('my.pdf');

[YangW0223]

me too

[vfa-tanna]

this work with me! 🆘

const info = document.getElementsByClassName('xxxx')[0] as HTMLElement;
info.style.width = info.scrollWidth.toString() + 'px';