使用 html2pdf 生成 pdf 时，可通过 `ignoreelements` 配置项精准跳过特定 dom 元素（如带 `id="ignore-div"` 的 div），确保其既不渲染、也不占用布局空间，彻底避免空白残留。
在实际 PDF 导出场景中，仅靠 data-html2canvas-ignore="true"（html2canvas 原生属性）往往无法完全消除被忽略元素造成的空白——这是因为 html2canvas 仍会为其保留文档流位置或盒模型占位，尤其在 Flex/Grid 布局或内联元素中尤为明显。
正确解法：使用 html2pdf 的 ignoreElements 回调函数
该选项在 html2canvas 渲染前介入 DOM 遍历阶段，直接从渲染树中排除目标元素，真正实现“零存在感”：
const options = {
filename: 'export.pdf',
html2canvas: {
ignoreElements: (element) => {
// 示例1：忽略指定 ID 的元素（推荐用于精确控制）
if (element.id === 'element-2') return true;
// 示例2：忽略含自定义 data 属性的元素（兼容原有标记习惯）
if (element.hasAttribute('data-pdf-ignore')) return true;
// 示例3：忽略特定 class（注意避免误伤）
// if (element.classList.contains('no-print')) return true;
return false;
}
},
jsPDF: { unit: 'px', format: 'a4', orientation: 'portrait' }
};
// 触发导出（作用于整个页面或指定容器）
html2pdf().set(options).from(document.getElementById('content')).save();✅ 关键优势：
- ignoreElements 是 html2pdf 封装层提供的标准钩子，比原生 data-html2canvas-ignore 更可靠；
- 回调函数接收真实 DOM 元素对象，支持任意逻辑判断（ID、class、属性、层级关系等）；
- 被忽略元素完全不参与 html2canvas 的布局计算与绘制，无空白、无占位、无副作用。
⚠️ 注意事项：
- 确保引入的是完整版 html2pdf.bundle.min.js（含 html2canvas + jsPDF），而非单独的 html2canvas；
- ignoreElements 仅对 html2canvas 阶段生效，若需同时隐藏打印样式，建议额外添加 CSS：
@media print { [data-pdf-ignore] { display: none !important; } } - 避免在 ignoreElements 中执行耗时操作（如 DOM 查询），应保持函数轻量、同步返回布尔值。
通过此方案，你既能保留 HTML 结构语义（便于开发调试），又能在 PDF 输出中实现干净、专业的排版效果。
立即学习“前端免费学习笔记（深入）”；
