使用jsPDF导出HTML表格显示异常，寻求解决方案

问题重现 #

将HTML表格通过jsPDF导出为PDF时，PDF中的表格布局、样式与网页端显示不一致，无法达到预期的规整表格效果。

相关截图 #

• PDF中的异常表格：
• 网页中的正常表格：
• 预期效果：

用到的代码与依赖 #

依赖库

jsPDF

导出PDF函数

function generatePdf() {
    var doc = new jsPDF("p", "pt", "a4");

    var pdfjs = document.querySelector("#toPDF");
    
    doc.html(pdfjs, {
      callback: function (doc) {
        doc.save("output.pdf");
      },
    });
  }

HTML表格代码

<table class="w-full mt-1">
  <thead>
    <tr>
      <th>No</th>
      <th>Jenis Saham</th>
      <th>Pemilik</th>
      <th>Jumlah Saham</th>
      <th>Persentase Saham (%)</th>
      <th>Nilai (dalam Rupiah)</th>
    </tr>
  </thead>
  <tbody>
    <tr class="w-full text-center">
      <td>1</td>
      <td>asd</td>
      <td>10</td>
      <td>10</td>
      <td>10</td>
      <td>Rp. 100</td>
    </tr>
  </tbody>
</table>

解决方案 #

1. 转换CSS工具类为内联样式 #

jsPDF的html渲染模式对Tailwind这类动态工具类的支持不佳，建议把表格样式改为内联形式，确保渲染时能正确识别：

<table style="width: 100%; margin-top: 0.25rem; border-collapse: collapse;">
  <thead>
    <tr style="border-bottom: 1px solid #e5e7eb;">
      <th style="padding: 0.5rem; text-align: left;">No</th>
      <th style="padding: 0.5rem; text-align: left;">Jenis Saham</th>
      <th style="padding: 0.5rem; text-align: left;">Pemilik</th>
      <th style="padding: 0.5rem; text-align: left;">Jumlah Saham</th>
      <th style="padding: 0.5rem; text-align: left;">Persentase Saham (%)</th>
      <th style="padding: 0.5rem; text-align: left;">Nilai (dalam Rupiah)</th>
    </tr>
  </thead>
  <tbody>
    <tr style="text-align: center; border-bottom: 1px solid #e5e7eb;">
      <td style="padding: 0.5rem;">1</td>
      <td style="padding: 0.5rem;">asd</td>
      <td style="padding: 0.5rem;">10</td>
      <td style="padding: 0.5rem;">10</td>
      <td style="padding: 0.5rem;">10</td>
      <td style="padding: 0.5rem;">Rp. 100</td>
    </tr>
  </tbody>
</table>

2. 优化jsPDF渲染参数 #

调整html方法的配置项，指定渲染宽度以适配A4纸张，同时模拟网页宽度保证样式渲染准确：

function generatePdf() {
    var doc = new jsPDF("p", "pt", "a4");
    var pdfjs = document.querySelector("#toPDF");
    
    doc.html(pdfjs, {
      callback: function (doc) {
        doc.save("output.pdf");
      },
      width: 595, // A4纸张宽度（pt单位）
      windowWidth: 800 // 模拟网页视口宽度，提升样式识别度
    });
  }

3. 确保依赖完整 #

jsPDF的html方法依赖html2canvas实现HTML转Canvas，需确保已正确引入兼容版本的html2canvas：

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

4. 手动绘制表格（终极方案） #

如果上述方法都无法解决，可放弃HTML渲染，直接用jsPDF的API手动绘制表格，完全控制样式与布局：

function generatePdf() {
    const doc = new jsPDF("p", "pt", "a4");
    const colWidths = [40, 100, 80, 80, 100, 120]; // 自定义列宽
    const headers = ["No", "Jenis Saham", "Pemilik", "Jumlah Saham", "Persentase Saham (%)", "Nilai (dalam Rupiah)"];
    const tableData = [["1", "asd", "10", "10", "10", "Rp. 100"]];
    let yPos = 50; // 表格起始Y坐标

    // 绘制表头
    doc.setFontSize(12);
    doc.setFont("helvetica", "bold");
    headers.forEach((header, idx) => {
        const xPos = 20 + colWidths.slice(0, idx).reduce((sum, width) => sum + width, 0);
        doc.text(header, xPos, yPos);
        doc.rect(xPos, yPos - 10, colWidths[idx], 20); // 绘制单元格边框
    });
    yPos += 20;

    // 绘制表格内容
    doc.setFont("helvetica", "normal");
    tableData.forEach(row => {
        row.forEach((cell, idx) => {
            const xPos = 20 + colWidths.slice(0, idx).reduce((sum, width) => sum + width, 0);
            doc.text(cell, xPos, yPos + 5);
            doc.rect(xPos, yPos - 5, colWidths[idx], 20);
        });
        yPos += 20;
    });

    doc.save("output.pdf");
}

内容的提问来源于stack exchange，提问作者Ahmad Riady Sugino