使用 html2pdf 的 `ignoreelements` 钩子函数可精准跳过目标 dom 元素的渲染，避免 `data-html2canvas-ignore="true"` 导致的空白占位问题，实现真正“无痕忽略”。
在将 HTML 转换为 PDF 的实际开发中，常需隐藏某些元素（如按钮、调试信息、水印占位符等），但若仅用 data-html2canvas-ignore="true"（html2canvas 的旧式标记），它仅跳过截图绘制，并不影响布局计算——被忽略的
仍参与文档流，导致生成的 canvas/PDF 中留下空白区域，严重影响排版效果。
✅ 正确解法是：改用 html2pdf.js 提供的 ignoreElements 配置项，它在 html2canvas 渲染前即从 DOM 树中逻辑排除目标元素，使其既不渲染、也不参与布局，彻底消除空白。
✅ 推荐实现方式（完整示例）
<!-- 引入 html2pdf（推荐使用最新版） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<p>
<button id="exportBtn">导出为 PDF</button>
</p>
<div id="content">
<div class="element-1">1. 正常显示内容</div>
<div class="element-2" id="ignore-div">2. 需完全移除（不留空）</div>
<div class="element-3">3. 紧跟其后的内容</div>
</div>
<script>
document.getElementById('exportBtn').onclick = function () {
const options = {
filename: 'export.pdf',
html2canvas: {
// 关键：返回 true 表示该元素将被完全忽略（不参与布局、不渲染）
ignoreElements: (element) => {
return element.id === 'ignore-div'; // 也可按 class、dataset 或其他条件判断
}
},
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
};
html2pdf()
.set(options)
.from(document.getElementById('content')) // 推荐仅转换目标容器，而非整个 body
.save();
};
</script>⚠️ 注意事项
- ignoreElements 是 html2canvas 1.0+ 和 html2pdf 0.9+ 支持的现代 API，请确保引入的是较新版本（如 html2pdf.bundle.min.js v0.10.x），旧版 html2canvas.min.js 单独引入无法生效；
- 不要混用 data-html2canvas-ignore 和 ignoreElements，后者已完全取代前者；
- 若需忽略多个元素，可在 ignoreElements 函数中扩展逻辑，例如：
ignoreElements: (el) => el.classList.contains('no-pdf') || el.dataset.ignore === 'true' || el.id === 'ignore-div' - 建议 .from() 明确指定导出范围（如 #content），避免意外包含隐藏按钮或导航栏，提升 PDF 干净度与可控性。
通过 ignoreElements 钩子，你获得的是语义清晰、布局干净、可维护性强的 PDF 导出控制能力——告别“看不见却占地方”的顽疾。
