How to debug html2pdf.js behavior (or reproduce CSS of exported PDF)?

Question

I'm trying to export PDF document with html2pdf.js and whole text of PDF is out of alignment.

Here is how text looks inside HTML:

And here is a PDF version:

All graphical elements are in place but all texts are shifted down. And here is no way to check CSS parameters for printed out PDF document. So, actually, I'm pretty confusing how to create reproducible example and make this question more focused, because I mixed two huge CSS files. One from separated single HTML page that I'm trying to print and second CSS file is a global styles of Vue.js application. So I think that here is multiple not correct inheritances that may break styles.

So here are multiple possible answers that should help me to understand root of problem:

1. AFAIK html2pdf.js ① creates clone of DOM element, ② converts it to PDF, ⓷ remove cloned element. Is it possible to store DOM element and prevent deletion of it to be able check styles with browser developer tools?

2. As I said before, all elements alignment is correct. Affected thing is text only. How this behavior may be reproduced?

For example element of black テスト text is a simple div:

<div style="display: inline-block; padding-bottom: 2px; border-bottom: 4px solid #000000;">
  テスト２
</div>

Black bottom line is a border-bottom, the only way to cross the border that I found is to change line-height to lower value, but in this case text will be shrinked vertically. But inside PDF text is shifted. How it possible to reproduce this behavior without changing divs paddings and margins? Only text should be moved.

Also function to convert HTML into PDF is pretty simple:

import html2pdf from "html2pdf.js";

...

html2pdf(this.$refs.htmlElement, {
  margin: 3,
  filename: "output.pdf",
  image: { type: 'jpeg', quality: 0.98 },
  html2canvas: {
    scale: 2,
    useCORS: true,
    width: 1300,
    allowTaint: true,
    // I tried to set it to true, but console logs are empty
    logging: false
  },
  jsPDF: {
    format: 'A4',
    orientation: 'landscape',
    unit: 'mm'
  },
  enableLinks: false
});

Additional info (2023/04/18)

We are using tailwind as main CSS library inside Vue application. After removing @tailwind base; (code) from CSS file text position is printing correctly. But I still can't figure out what part of tailwindcss is conflicting with my own styles...

Additional info (2023/04/20)

I found CSS parameter that breaking text alignment:

img {
  display: block;
}

If I set globally display: unset; for img element PDF text is printing correctly. However, if I try to change parameter only for current page using scoped keyword the PDF is generated not correctly again.

I tried to remove all images before generate PDF:

window.document.querySelectorAll('img').forEach( el => {
  el.remove();
});

But even if here is no one img element in page text is printing not correctly. Can't figure out how img style may affect page without img elements...

Answer 1

hey i have tried to make a codepen from given reference. And it is working fine as output of on pdf is same as configured in js code.

var element = document.getElementById("print");
var opt = {
  margin: 1,
  filename: "myfile.pdf",
  image: { type: "jpeg", quality: 0.98 },
  html2canvas: { scale: 2 },
  jsPDF: { unit: "in", format: "letter", orientation: "portrait" }
};

html2pdf(
  element,
  {
    margin: 3,
    filename: "output.pdf",
    image: { type: "jpeg", quality: 0.98 },
    enableLinks: false
  },
  opt
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<div id="print">
  <div id="print" style="display: inline-block; padding: 12px; background-color:darkgreen; color:white; font-size: .8rem">
    Title
  </div><br>
  <div id="print" style="display: inline-block; padding-bottom: 2px; border-bottom: 4px solid #000000;">
    テスト２
  </div>
</div>

https://codepen.io/dakshank/pen/PoyzXVX