使用 html2pdf 的 `ignoreelements` 钩子函数可精准跳过目标 dom 节点，避免 `data-html2canvas-ignore="true"` 留下空白的问题，实现真正“无痕忽略”。
在将 HTML 导出为 PDF 的实际开发中，常需隐藏某些调试用、按钮或占位元素，但若仅用 data-html2canvas-ignore="true"（html2canvas 原生属性），该元素虽不被渲染，其原始 DOM 位置仍会保留空白——因为 html2canvas 默认仅跳过绘制，并不修改布局流。而 html2pdf（基于 html2canvas + jsPDF 的封装库）提供了更强大的 ignoreElements 配置项，允许你在渲染前就从 DOM 树中逻辑排除节点，从而彻底消除空白。
✅ 正确做法是：使用 html2pdf().set({ html2canvas: { ignoreElements } })，传入一个返回布尔值的函数，对匹配的元素直接跳过采集：
const options = {
filename: 'export.pdf',
html2canvas: {
ignoreElements: (element) => {
// 忽略 id 为 "ignore-div" 的元素
if (element.id === 'ignore-div') return true;
// 或按 class 忽略（例如 class="no-pdf"）
if (element.classList && element.classList.contains('no-pdf')) return true;
// 或按 data 属性（兼容旧逻辑，但更可控）
if (element.hasAttribute('data-pdf-ignore') && element.getAttribute('data-pdf-ignore') === 'true') return true;
return false;
}
},
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
};
// 触发导出（作用于整个 body 或指定容器）
document.getElementById('exportBtn').onclick = () => {
html2pdf().set(options).from(document.getElementById('content')).save();
};? 注意事项：
- ignoreElements 函数在 html2canvas 克隆并遍历 DOM 前执行，因此能从根本上避免布局干扰；
- 不要混用 display: none 或 visibility: hidden —— 这类 CSS 隐藏仍可能影响盒模型计算，且无法解决 data-html2canvas-ignore 的留白缺陷；
- 若需动态控制忽略逻辑（如多条件、运行时判断），可在函数内加入任意 JS 逻辑（如检查父级、数据属性、自定义状态等）；
- 确保已正确引入依赖：
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
? 小结：与其依赖易出错的属性标记，不如用 ignoreElements 主动过滤——它更可靠、更灵活，且真正实现“所见即所得”的 PDF 输出。
立即学习“前端免费学习笔记（深入）”；
