使用jsPDF+html2canvas导出React表格时文本居中对齐异常

这问题我之前也碰过，主要是html2canvas渲染时对CSS布局的解析和浏览器不一致导致的，试试下面这几个方案：

1. 调整html2canvas的渲染参数 #

html2canvas默认的渲染配置很容易踩坑，给它加几个关键参数：

• scale: 2：提升渲染分辨率，不仅能避免模糊，还能修正很多布局偏移的小问题
• useCORS: true：如果表格里有外部资源（比如图标），这个能避免渲染异常，没的话加上也不影响
• allowTaint: true：允许渲染带内联样式的元素，有时候浏览器能解析的内联样式，canvas会卡壳

修改后的调用代码：

html2canvas(exportContainer, {
  scale: 2,
  useCORS: true,
  allowTaint: true
}).then(canvas => {
  // 你的jsPDF导出逻辑
});

2. 给表格加固定布局的CSS #

页面显示正常但导出炸锅，大概率是表格的table-layout没设对。浏览器会自动调整单元格宽度，但canvas渲染时会算错，强制固定布局就能解决：

.table-wrap table {
  width: 100%;
  table-layout: fixed; /* 强制按设置的宽度渲染单元格 */
  border-collapse: collapse;
}

.table-wrap td, .table-wrap th {
  text-align: center;
  padding: 8px 12px;
  box-sizing: border-box; /* 确保padding不会撑开单元格，避免偏移 */
}

另外别用margin来调单元格间距，全用padding，canvas对margin的解析一直有问题。

3. 修正jsPDF的画布缩放逻辑 #

把canvas加到PDF时，别直接用canvas的原始宽高，按PDF页面尺寸等比例缩放，不然容易出现偏移：

const pdf = new jsPDF('p', 'mm', 'a4');
const pageWidth = pdf.internal.pageSize.getWidth();
const imgWidth = pageWidth - 20; /* 左右各留10mm边距 */
const imgHeight = (canvas.height * imgWidth) / canvas.width;

// 如果要垂直居中，计算y轴位置
const yOffset = (pdf.internal.pageSize.getHeight() - imgHeight) / 2;

pdf.addImage(canvas, 'PNG', 10, yOffset, imgWidth, imgHeight);
pdf.save('table-export.pdf');

4. 等字体加载完再导出 #

如果用了自定义字体，html2canvas可能还没等字体加载完就渲染了，导致文本宽度计算错误，出现偏移。加个等待字体加载的逻辑：

async function exportPDF() {
  await document.fonts.ready; // 等所有页面字体加载完成
  const canvas = await html2canvas(exportContainer, { scale: 2 });
  // 后续jsPDF操作
}

5. 换用html2pdf.js封装库 #

要是上面的方法都没用，直接用html2pdf.js，它是jsPDF和html2canvas的封装，内置了很多适配处理，省得自己调参数：

import html2pdf from 'html2pdf.js';

const exportOptions = {
  margin: 10,
  filename: 'table-export.pdf',
  image: { type: 'png', quality: 0.98 },
  html2canvas: { scale: 2 },
  jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
};

html2pdf().set(exportOptions).from(exportContainer).save();

内容的提问来源于stack exchange，提问作者Divyanshu Bhujbal