为何使用jsPDF将HTML导出为PDF速度缓慢？

你遇到的核心问题是doc.html()方法本身的性能瓶颈——这个方法依赖html2canvas类渲染引擎把HTML转换成Canvas，再转PDF，哪怕是简单表格也会经历完整的DOM解析、样式计算、画布渲染流程，这就是耗时的根源。针对你的场景，给几个实用优化方向：

1. 替换为专门的表格生成API #

放弃doc.html()，改用jsPDF官方推荐的autoTable插件，直接用数据生成表格，跳过HTML转Canvas的中间开销：

// 先安装并引入autoTable插件
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';

const doc = new jsPDF();
// 构造5行10列的表格数据
const tableData = Array.from({length:5}, () => 
  Array.from({length:10}, (_, idx) => `单元格${idx+1}`)
);
// 生成表格
autoTable(doc, {
  head: [Array.from({length:10}, (_, idx) => `表头${idx+1}`)], // 可选配置表头
  body: tableData,
});
const buffer = doc.output("arraybuffer");
resolve(buffer);

这种方式直接操作PDF对象，没有中间渲染步骤，速度能提升数倍。

2. 优化doc.html()的调用参数 #

如果必须保留HTML转PDF的方式，给doc.html()添加配置项减少不必要的计算：

doc.html(htmlContent, {
  // 禁用不必要的字体加载
  disableFontFace: true,
  // 限定渲染宽度为目标元素宽度，避免额外布局计算
  windowWidth: htmlContent.offsetWidth,
  // 跳过背景渲染（若表格无背景样式）
  background: 'white',
  // 关闭自动分页（若表格单页可容纳）
  autoPaging: 'none'
}).then(() => {
  const buffer = doc.output("arraybuffer");
  resolve(buffer);
});

这些配置能减少html2canvas的渲染工作量，有效降低耗时。

3. 清理DOM元素的冗余样式 #

检查目标表格是否继承了复杂的全局样式（比如嵌套CSS变量、伪元素、多层嵌套选择器），这些都会增加样式计算时间。可以给表格添加独立的样式重置：

.pdf-export-table {
  all: unset;
  border-collapse: collapse;
}
.pdf-export-table td {
  border: 1px solid #000;
  padding: 4px;
}

减少样式解析的复杂度。

补充：性能分析的参考结论 #

从你提供的性能分析结果来看，耗时主要集中在HTML到Canvas的渲染阶段，这也验证了doc.html()的中间转换流程是核心性能瓶颈。

内容的提问来源于stack exchange，提问作者1jss