如何导出HTML表格为PDF并保留表格原有样式？

我完全懂你遇到的痛点——用jspdf导出表格时结构和样式乱掉的问题真的很头疼，尤其是当表格有复杂样式、合并单元格或者特殊排版的时候。这里有几个经过社区验证的可行方案，附带上具体实现示例，你可以按需选择：

这个方案是先把HTML表格转成Canvas图像，再将图像插入PDF，能1:1还原表格的外观，适合优先保证视觉效果的场景。

实现步骤&代码 #

1. 先安装依赖：

npm install html2canvas jspdf

2. 导出函数示例：

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export function exportTableToPdf() {
  // 替换成你的表格ID
  const targetTable = document.getElementById('your-target-table');
  
  html2canvas(targetTable, {
    scale: 2, // 提升导出PDF的清晰度
    useCORS: true, // 处理跨域图片（如果表格里有图片）
    logging: false
  }).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF('p', 'mm', 'a4'); // 纵向、毫米单位、A4尺寸
    const imgWidth = 210; // A4纸宽度（mm）
    const pageHeight = 297; // A4纸高度（mm）
    const imgHeight = (canvas.height * imgWidth) / canvas.width;
    let remainingHeight = imgHeight;
    let currentYPosition = 0;

    // 第一页插入表格图像
    pdf.addImage(imgData, 'PNG', 0, currentYPosition, imgWidth, imgHeight);
    remainingHeight -= pageHeight;

    // 处理长表格分页
    while (remainingHeight >= 0) {
      currentYPosition = remainingHeight - imgHeight;
      pdf.addPage();
      pdf.addImage(imgData, 'PNG', 0, currentYPosition, imgWidth, imgHeight);
      remainingHeight -= pageHeight;
    }

    pdf.save('table-export.pdf');
  });
}

优缺点 #

• ✅ 完全保留表格的样式、颜色、边框、合并单元格效果
• ❌ 导出的表格是图像格式，PDF内的文字无法选中复制

如果需要导出的PDF是结构化的（文字可选中、复制），可以用pdfmake直接通过JS定义表格的结构和样式，生成矢量PDF。

实现步骤&代码 #

1. 安装依赖：

npm install pdfmake

2. 导出函数示例：

import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
// 加载默认字体
pdfMake.vfs = pdfFonts.pdfMake.vfs;

export function exportStructuredTable() {
  // 从DOM提取表格数据（如果是动态表格，需要自己写逻辑映射）
  const tableBody = [];
  const tableRows = document.querySelectorAll('#your-target-table tr');
  
  tableRows.forEach(row => {
    const rowData = [];
    const cells = row.querySelectorAll('td, th');
    cells.forEach(cell => rowData.push(cell.textContent.trim()));
    tableBody.push(rowData);
  });

  const docDefinition = {
    content: [
      {
        table: {
          headerRows: 1, // 表头行数
          widths: ['*', '*', '*'], // 列宽分配（*表示自适应）
          body: tableBody
        },
        layout: {
          // 自定义样式：表头背景色
          fillColor: (rowIndex) => rowIndex === 0 ? '#f0f0f0' : null,
          // 边框粗细
          hLineWidth: (i, node) => i === 0 || i === node.table.body.length ? 2 : 1,
          vLineWidth: () => 1,
          // 边框颜色
          hLineColor: () => '#cccccc',
          vLineColor: () => '#cccccc'
        }
      }
    ]
  };

  pdfMake.createPdf(docDefinition).download('structured-table.pdf');
}

优缺点 #

• ✅ 导出的PDF是矢量结构，文字可选中、编辑
• ❌ 需要手动映射DOM表格的样式到pdfmake配置，适合样式不特别复杂的表格

如果表格样式极其复杂（比如包含CSS动画、特殊字体、嵌套表格），前端方案难以覆盖，可以考虑后端用wkhtmltopdf直接将HTML页面转成PDF，能完美还原所有HTML/CSS样式。

Node.js后端示例 #

1. 安装依赖：

npm install wkhtmltopdf

2. 处理导出的代码：

const wkhtmltopdf = require('wkhtmltopdf');
const fs = require('fs');

// 假设前端传来的完整表格HTML（包含所有样式）
const tableHtml = `
<!DOCTYPE html>
<html>
<head>
  <style>
    #your-target-table { border-collapse: collapse; width: 100%; }
    #your-target-table th { background: #f0f0f0; border: 1px solid #ccc; padding: 8px; }
    #your-target-table td { border: 1px solid #ccc; padding: 8px; }
  </style>
</head>
<body>
  <table id="your-target-table">
    <!-- 你的表格内容 -->
    <tr><th>表头1</th><th>表头2</th></tr>
    <tr><td>数据1</td><td>数据2</td></tr>
  </table>
</body>
</html>
`;

wkhtmltopdf(tableHtml, {
  pageSize: 'A4',
  margin: { top: '10mm', right: '10mm', bottom: '10mm', left: '10mm' }
}, (err, stream) => {
  if (err) throw err;
  // 生成PDF文件，或者直接返回给前端
  stream.pipe(fs.createWriteStream('complex-table.pdf'));
});

优缺点 #

• ✅ 完美还原所有HTML/CSS样式，支持复杂排版
• ❌ 需要后端支持，部署时需安装wkhtmltopdf二进制文件

内容的提问来源于stack exchange，提问作者Dimitar Arabadzhiyski