javascript - Text Misalignment in Tables Generated with html2pdf.js and TypeScript - Stack Overflow

admin管理员组

文章数量:1024640

I'm building a TypeScript application that generates PDF documents using html2pdf.js. While the HTML tables render perfectly in the browser, the text inside the table cells appears misaligned (shifted downward) in the generated PDF. This issue is particularly noticeable with numerical values, such as prices or totals.

What I've Tried: Adjusting Table Styles:

table {
  border-collapse: collapse;
  width: 100%;
}
td, th {
  vertical-align: middle; /* Also tried 'top' */
  text-align: left;
  padding: 0;
}

Increasing html2canvas Scale:

html2pdf().set({ html2canvas: { scale: 2 } }).from(element).save();
Using white-space: nowrap:

Prevented wrapping of numerical values in table cells.
Checking for Style Compatibility:
Ensured that CSS properties like padding, line-height, and vertical-align are compatible with html2pdf.js.

Code Example:

Here’s a simplified version of my component:

import React from 'react';
import html2pdf from 'html2pdf.js';

const Preview = ({ data }) => {
  const generatePDF = () => {
    const element = document.getElementById('invoice-content');
    html2pdf().set({ html2canvas: { scale: 2 } }).from(element).save('invoice.pdf');
  };

  return (
    <div>
      <button onClick={generatePDF}>Download PDF</button>
      <div id="invoice-content">
        <table>
          <thead>
            <tr>
              <th>Column 1</th>
              <th>Column 2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>123 456 ₸</td>
              <td>789 012 ₸</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default Preview;

Questions:

1. How can I resolve the downward text alignment issue in the generated PDF tables?

2. Are there any known workarounds or alternative libraries that handle table rendering in PDFs more reliably?

I'm building a TypeScript application that generates PDF documents using html2pdf.js. While the HTML tables render perfectly in the browser, the text inside the table cells appears misaligned (shifted downward) in the generated PDF. This issue is particularly noticeable with numerical values, such as prices or totals.

What I've Tried: Adjusting Table Styles:

table {
  border-collapse: collapse;
  width: 100%;
}
td, th {
  vertical-align: middle; /* Also tried 'top' */
  text-align: left;
  padding: 0;
}

Increasing html2canvas Scale:

html2pdf().set({ html2canvas: { scale: 2 } }).from(element).save();
Using white-space: nowrap:

Prevented wrapping of numerical values in table cells.
Checking for Style Compatibility:
Ensured that CSS properties like padding, line-height, and vertical-align are compatible with html2pdf.js.

Code Example:

Here’s a simplified version of my component:

import React from 'react';
import html2pdf from 'html2pdf.js';

const Preview = ({ data }) => {
  const generatePDF = () => {
    const element = document.getElementById('invoice-content');
    html2pdf().set({ html2canvas: { scale: 2 } }).from(element).save('invoice.pdf');
  };

  return (
    <div>
      <button onClick={generatePDF}>Download PDF</button>
      <div id="invoice-content">
        <table>
          <thead>
            <tr>
              <th>Column 1</th>
              <th>Column 2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>123 456 ₸</td>
              <td>789 012 ₸</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default Preview;

Questions:

1. How can I resolve the downward text alignment issue in the generated PDF tables?

2. Are there any known workarounds or alternative libraries that handle table rendering in PDFs more reliably?

本文标签： javascriptText Misalignment in Tables Generated with html2pdfjs and TypeScriptStack Overflow