html怎样去除广告转pdf_html转pdf去广告法【窍门】

确认后右键 → “Delete element”，看页面是否清爽。这一步决定后续自动化能否生效。

用 Puppeteer 在生成 PDF 前执行 JavaScript 清理

直接调 page.pdf() 不会自动去广告；必须先运行清理脚本。关键点：清理要等页面加载完成（networkidle0），且在 page.pdf() 之前执行。

await page.goto('https://example.com/article', { waitUntil: 'networkidle0' });
await page.evaluate(() => {
  // 移除常见广告容器
  document.querySelectorAll('div[class*="ad"], aside[id*="ad"], [data-ad], .taboola-container, #taboola-below-article-thumbnails').forEach(el => el.remove());
  // 移除 iframe 广告（谨慎：别误删内容 iframe）
  document.querySelectorAll('iframe[src*="doubleclick"] , iframe[src*="googlesyndication"]').forEach(ifr => ifr.remove());
});

注意：page.evaluate() 内不能访问 Node.js 变量；所有逻辑必须写成纯浏览器可执行的字符串或函数体。误删 可能干掉评论区或视频，建议先加 console.log 调试。

立即学习“前端免费学习笔记（深入）”；

用 wkhtmltopdf 时通过 --user-style-sheet 注入 CSS 隐藏

比 JS 方案更轻量，适合批量处理静态页。广告元素往往有固定 class 或位置特征，用 CSS display: none 直接压制。

准备一个 ad-hide.css：

Spell.tools

高颜值AI内容营销创作工具

下载

div.ad-banner, .ad-wrapper, #ad-leaderboard, [data-ad-slot], .taboola-container {
  display: none !important;
}
iframe[src*="doubleclick.net"], iframe[src*="amazon-adsystem.com"] {
  display: none !important;
}

命令行调用：

wkhtmltopdf --user-style-sheet ad-hide.css https://example.com/article output.pdf

缺点：CSS 无法移除 广告加载器，也不能阻止广告 JS 执行（可能仍发请求）；但对大多数展示型广告足够有效。

PDF 输出后仍看到残留？检查字体渲染与背景图广告

有些广告是 SVG 内联绘制，或用 background-image: url(.../ad-banner.png) 加载；CSS 隐藏无效，Puppeteer 的 evaluate 也难定位。

应对方式：

• 用 page.screenshot({ fullPage: true }) 先截图，肉眼确认是否真“干净”
• PDF 中文字模糊？可能是广告 JS 动态插入了干扰 canvas 或 webfont，需在 evaluate 中额外执行 document.fonts.clear()（仅 Chromium）
• 导出 PDF 后用 pdfinfo output.pdf 查嵌入字体，若含可疑名称（如 AdFont），说明广告 JS 注入了自定义字体

真正顽固的广告往往和内容混排（比如“赞助商”混在正文段落里），这种没法靠规则清除，只能人工校验或结合 NLP 提取正文再重排 HTML。