作者：翟天保Steven
版权声明：著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处
前言
在日常学习和技术积累过程中，我们经常会在 CSDN 等技术博客平台上阅读高质量的技术文章。然而，网页阅读存在着广告干扰、网络依赖等问题，很多时候我们希望能将文章保存为 PDF 格式，方便离线阅读和整理笔记。
总结为如下四点：
广告与干扰元素影响阅读体验：CSDN 等平台的文章页面通常包含大量侧边栏广告、推荐内容和互动组件，这些元素会分散注意力，影响阅读效率。
离线学习与知识管理需求：在没有网络的环境下（如通勤、出差），我们仍然希望能够继续学习之前收藏的文章。将文章导出为 PDF 可以方便地进行离线阅读。
个性化排版与打印需求：网页版文章的排版可能不适合打印或长时间阅读，通过导出为 PDF，我们可以自定义页面布局、字体大小等参数，优化阅读体验。
知识沉淀与笔记整理：将重要的技术文章保存为 PDF 后，可以更方便地添加标注、整理笔记，形成个人知识库。
本文将介绍一种通过 JavaScript 代码一键导出 CSDN 文章为 PDF 的方法，帮助你轻松获取无干扰的纯净阅读体验。
功能解析
若要实现此功能，先拆解分析。我们需要从如下几点思考：
内容提取与准备
- 通过
document.getElementsByClassName方法获取文章标题和内容 - 移除文章内容容器上的内联样式，避免原始样式影响打印效果
- 创建自定义的页眉页脚，添加导出时间和版权信息
- 通过
临时 DOM 修改
- 保存原始页面内容，以便后续恢复
- 用提取的标题、内容和自定义的页眉页脚替换整个页面内容
- 添加打印专用样式，优化 PDF 显示效果
PDF 生成与页面恢复
- 调用
window.print()触发浏览器的打印对话框 - 用户在对话框中选择 "保存为 PDF" 选项
- 打印完成后，将页面内容恢复为原始状态
- 调用
错误处理
- 使用
try...catch块捕获可能的错误 - 确保在发生错误时也能恢复原始页面，避免页面崩溃
- 使用
代码实现
根据上述四点分析，来实现功能，完整代码如下：
(function(){'use strict';try {// 保存原始页面内容，以便后续恢复var originalContent = document.body.innerHTML;// 获取文章标题和内容（根据CSDN页面结构）var pageTitle = document.getElementsByClassName('article-title-box')[0].innerHTML;var mainContent = document.getElementsByClassName('article_content')[0].innerHTML;// 移除文章内容容器上的内联样式，确保内容完整显示var contentBox = document.getElementsByClassName('article_content')[0];contentBox.removeAttribute("style");// 准备打印时的页眉和页脚内容var headerContent = '<div class="print-header" style="text-align:center; font-size:14px; color:#666;">' + '导出自CSDN - ' + new Date().toLocaleDateString() + '</div>';var footerContent = '<div class="print-footer" style="text-align:center; font-size:14px; color:#666;">' + '© ' + new Date().getFullYear() + ' 个人版权所有</div>';// 创建打印专用样式，优化PDF显示效果var style = document.createElement('style');style.innerHTML = `@media print {body { font-family: 'Microsoft YaHei', sans-serif; }.print-header { position: fixed; top: 0; width: 100%; }.print-footer { position: fixed; bottom: 0; width: 100%; }img { max-width: 100% !important; height: auto !important; } /* 确保图片适应页面 */pre { white-space: pre-wrap; word-wrap: break-word; } /* 代码块自动换行 */a { text-decoration: none; color: inherit; } /* 链接不显示下划线和颜色 */}`;document.head.appendChild(style);// 临时替换页面内容，只保留标题、文章主体和页眉页脚document.body.innerHTML = headerContent + pageTitle + mainContent + footerContent;// 调整页面宽度和缩放比例，优化打印布局document.body.style.width = "100%";document.body.style.zoom = 0.8;// 调用浏览器的打印功能，用户可以选择保存为PDFwindow.print();// 打印完成后，恢复原始页面内容document.body.innerHTML = originalContent;return false;} catch(e) {console.error('导出PDF出错:', e);// 发生错误时确保页面恢复document.body.innerHTML = originalContent;return false;}
})();使用方法
- 打开你想要导出的 CSDN 文章页面
- 按下 F12 打开浏览器开发者工具
- 切换到 Console 面板
- 复制上述代码并粘贴到控制台中
- 按下 Enter 执行代码
- 在弹出的打印对话框中，选择 "保存为 PDF" 选项
- 选择保存位置和文件名，点击 "保存"
希望本文介绍的知识可以解决你的烦恼。
如果文章帮助到你了，可以点个赞让我知道，我会很快乐~加油！
