jspdf.html() doesn't render correctly

[milesje]

I have read and understood the contribution guidelines.

jsPDF version is 2.5.1

I'm just performing a simple jspdf.html() call but the rendered PDF does not match the rendered HTML. I am using Tailwind CSS in the HTML but I have also converted the Tailwind code into inlined styles which produces the exact same results.

Here is the HTML to be rendered

<div id="appGenPdfText" class="flex flex-col w-full h-full space-y-1">
  <div class="flex flex-row bg-blue-200 justify-center">
    <p class="m-1 text-primary text-xl">APPLICANT GENERAL INFORMATION</p>
  </div>
  <div class="flex bg-primary justify-center">
    <p class="text-white">Primary Information</p>
  </div>
</div>

here is the JS which uses jsPDF to render as PDF.

let pdf = await new jsPDF({
  orientation: 'p',
  unit: 'pt',
  format: 'letter',
  putOnlyUsedFonts: true,
  compress: true
})
const source = await document.getElementById('appGenPdfText')

await pdf.html(source, {
  width: 580,
  windowWidth: 580,
  margin: 15
})
await pdf.save()

The resulting PDF looks like.

As you can see the first like of text for some reason has no spaces, and is not centered in the light blue box. The second line does have the space between words but also is not centered.

The rendered HTML looks like this.

[margox]

I am facing the same issue

[michakrausser]

On my nuxt 3 project I'm using tailwindcss and I have the same issue.
On a test project I tried it out. Without tailwindcss it rendered everything perfectly. But adding tailwindcss the text get rendered wrong like the images above show it.
Any solutions?
Update:
Possible solution:
https://stackoverflow.com/questions/70432566/error-text-is-cut-off-when-generated-to-pdf-in-nuxt-js-nuxtjs-tailwindcss#:~:text=We%20had%20the%20same%20problem%20here.

[ChamkhiAnas]

@milesje @michakrausser
I have the same problem i did overcome this by adding fontsize/50 to the minus top
ex : if(font-size:1rem then i add top:-0.5rem) but the problem is when u try to use autopaging option everything will turn to a bigg mess especially the pagebreaks , have u found any solution to this guys ?

[ningyuv]

@tailwind base;
@tailwind components;
@tailwind utilities;

/* add following lines */
@layer base {
  img {
    @apply inline-block;
  }
}

see: https://stackoverflow.com/questions/74980740/html2canvas-shifting-text-downwards
it works for me, although my HTML has nothing to do with img.

before:

after:

origin:

[maksym-slinchenko]

I faced the same problem. As content I use html with inline styles. Has the problem been solved or has anyone found a way to solve it? Tried all the methods described above, but nothing helped. Here is my code:

  const content =
    '<div style="border: 1px solid #000000; color: #000000; align: start; min-height: 150px"><p>This is the initial <span style="background-color: rgb(236, 202, 250);">content of the editor.</span></p></div>';

  const handleGeneratePdf = () => {
    const doc = new jsPDF({
      orientation: "p",
      format: "a4",
      unit: "px",
      hotfixes: ["px_scaling"],
    });

    doc.html(content, {
      callback(doc) {
        doc.output("dataurlnewwindow");
      },
      x: 0,
      y: 0,
      autoPaging: "text",
      margin: 20,
      width: 500,
      windowWidth: 595,
    });
  };

This is how the text looks in the editor:

This is how the text looks in pdf:

[ivanms1]

ningyuv

you are a hero, this solved my problem!

[akbarism]

i have the same issue, the space is not rendering properly even i add the inline-block on my tailwind css
web view :

pdf result:

[anatolykopyl]

The problem with spaces missing can be somewhat solved with word-spacing. Although you may need to apply it on a case by case basis.

[AyanAcharya]

you can use word-spacing.but its not gonna work for every word.
some word still will be remain same.

[danverbs]

@ningyuv thank you! Fixed the issue for me

[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.