Overlapping text in JSPDF

Question

I have a dashboard page generated using d3, it shows different html tables with styles and date. I'm using JSPdf to export the tables to pdf for the end user, now the problem is when i tried this on a production machine (a different Laptop with a slightly smaller screen) the pdf is displaying the tables but some text is overlapping outside their cells and i end up with text scrabbeled, Now even in my screen, all it takes is a zoom in our out in my navigator to end up with a pdf that shows some data in a misordered ways, anyone has been through this and got any idea ? i need to get a pdf export with organized data perhaps something similar to what's displayed in my browser, because for some reason the result on the pdf is different from the html webpage output.

Here's an issue on GitHub with a screenshot showing the problem : https://github.com/MrRio/jsPDF/issues/879

Answer 1

You can use a tool such as SVG Crowbar or Hanpuku to save the SVG canvas to a SVG file with all the necessary styling. You can then convert to PDF using Inkscape or Illustrator.

Answer 2

Have you taken a look at the stylesheets? There may be a print.css that may be affecting the output and may be different to what you are actually rendering.

You can also look at their "String Splitting" sample, they are running into a similar issue:

The problem with their example is the vertical offset

Original:

verticalOffset += (lines.length + 0.5) * size / 72

New:

verticalOffset += (lines.length + 2.5) * size / 72

Answer 3

Since your problem is related to zooming (or not zooming), I am sure the discussion happened at this question will help - Using jspdf to save html page as pdf, saved pdf contains incomplete page content if browser is zoomed, Why?

Basically, the trick is to fix the size of page being printed, so that whether you zoom the page or not, the saved pdf always comes in the same size. What worked for me is- source.style.width = '1700px'; In your case, just check what is the width at your 90% or 110% zooming (since that gives correct pdf for you), and then set that width before the jspdf save command. I hope this should work for you.