JavaScript 控制台脚本实战3步实现 CSDN 文章纯净 PDF 导出2024版在技术文档阅读和整理过程中CSDN 作为国内知名的开发者社区常常是我们获取技术资料的重要来源。然而平台页面中的侧边栏、广告、推荐内容等冗余元素往往会影响阅读体验和后续的资料归档。本文将介绍一种高效的方法通过浏览器控制台脚本快速提取 CSDN 文章核心内容并导出为纯净的 PDF 文件。1. 理解 CSDN 页面结构CSDN 的文章页面通常包含以下几个主要部分顶部导航栏包含登录状态、搜索框等文章标题区域标题、作者信息、发布时间等文章正文区域核心内容所在侧边栏相关推荐、广告等内容底部区域版权声明、相关文章推荐等为了实现纯净 PDF 导出我们需要精确识别并提取文章正文区域同时移除其他干扰元素。以下是 CSDN 文章页面的典型 DOM 结构div classmain-container div classblog-content-box div classarticle-header-box !-- 文章标题区域 -- /div div classarticle-content !-- 文章正文内容 -- /div /div div classrecommend-box !-- 推荐内容 -- /div /div2. 三步实现纯净 PDF 导出2.1 第一步识别并提取文章核心内容首先我们需要通过 JavaScript 选择器定位到文章的核心内容区域。根据 2024 年 CSDN 的最新页面结构文章正文通常位于div.article-content元素中。// 获取文章核心内容 const articleContent document.querySelector(div.article-content); if (!articleContent) { console.error(无法找到文章内容区域请检查页面结构是否变化); return; }2.2 第二步移除干扰元素为了确保导出的 PDF 只包含文章核心内容我们需要移除以下常见干扰元素顶部导航栏和标题区域侧边栏和相关推荐底部评论和推荐区域浮动广告和工具栏以下是完整的清理脚本// 移除顶部导航和标题区域 document.querySelectorAll(header, .nav-container, .blog-header-box).forEach(el el.remove()); // 移除侧边栏 document.querySelectorAll(.csdn-side-toolbar, .blog-container-aside).forEach(el el.remove()); // 移除底部区域 document.querySelectorAll(.comment-box, .recommend-box, .blog-footer-bottom).forEach(el el.remove()); // 移除浮动元素 document.querySelectorAll(.toolbar-container, .meau-drop).forEach(el el.remove()); // 移除广告 document.querySelectorAll(.ad-box, .p4p-tag).forEach(el el.remove()); // 确保文章内容宽度填满页面 document.querySelector(main).style.width 100%;2.3 第三步优化打印样式并触发打印为了确保 PDF 导出效果最佳我们需要调整页面样式然后调用浏览器的打印功能// 添加打印优化样式 const style document.createElement(style); style.textContent media print { body * { visibility: hidden; } .article-content, .article-content * { visibility: visible; } .article-content { position: absolute; left: 0; top: 0; width: 100%; padding: 0; margin: 0; } pre, code { white-space: pre-wrap !important; } } ; document.head.appendChild(style); // 触发打印 setTimeout(() { window.print(); }, 500);3. 完整脚本与一键执行将上述步骤整合为一个完整的脚本可以通过浏览器控制台一键执行(function() { use strict; // 1. 获取文章内容 const article document.querySelector(div.article-content); if (!article) { console.error(文章内容区域未找到请检查选择器); return; } // 2. 清理页面 const elementsToRemove [ header, .nav-container, .blog-header-box, .csdn-side-toolbar, .blog-container-aside, .comment-box, .recommend-box, .blog-footer-bottom, .toolbar-container, .meau-drop, .ad-box, .p4p-tag ]; elementsToRemove.forEach(selector { document.querySelectorAll(selector).forEach(el el.remove()); }); // 3. 调整布局 document.querySelector(main).style.width 100%; article.style.maxWidth 100%; article.style.padding 0; article.style.margin 0; // 4. 添加打印样式 const style document.createElement(style); style.textContent media print { body * { visibility: hidden; } .article-content, .article-content * { visibility: visible; } .article-content { position: absolute; left: 0; top: 0; width: 100%; } pre, code { white-space: pre-wrap !important; } } ; document.head.appendChild(style); // 5. 触发打印 setTimeout(() { window.print(); }, 1000); })();4. 高级技巧与问题排查4.1 处理代码折叠区域CSDN 文章中的长代码块常常会被折叠我们需要确保这些内容在 PDF 中完全展开// 展开所有折叠的代码块 document.querySelectorAll(.hide-preCode-bt).forEach(btn { btn.click(); }); // 确保代码块可见 document.querySelectorAll(pre).forEach(pre { pre.style.maxHeight none; pre.style.overflow visible; });4.2 应对页面结构变化如果脚本失效可能是 CSDN 更新了页面结构。可以通过以下方法排查使用开发者工具检查元素更新选择器以匹配新的 DOM 结构测试脚本在不同文章页面的兼容性4.3 优化 PDF 输出质量为了获得更高质量的 PDF 输出可以在打印对话框中进行以下设置设置项推荐值说明布局纵向更适合技术文档阅读纸张大小A4标准打印尺寸边距无最大化利用页面空间背景图形勾选确保代码高亮等样式保留5. 脚本自动化与浏览器扩展对于需要频繁导出 PDF 的用户可以考虑将脚本封装为浏览器扩展实现一键操作。以下是简单的扩展实现思路manifest.json- 定义扩展基本信息{ manifest_version: 3, name: CSDN PDF Exporter, version: 1.0, action: { default_icon: icon.png, default_title: Export CSDN Article to PDF }, permissions: [activeTab, scripting], background: { service_worker: background.js } }background.js- 处理按钮点击事件chrome.action.onClicked.addListener((tab) { chrome.scripting.executeScript({ target: {tabId: tab.id}, files: [content-script.js] }); });content-script.js- 包含核心清理和打印逻辑这种扩展方式可以避免每次都需要手动复制粘贴脚本大大提升工作效率。