将CSDN文章导出为PDF

作者：翟天保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;
        
        // 调用浏览器的打印功能，用户可以选择保存为PDF
        window.print();
        
        // 打印完成后，恢复原始页面内容
        document.body.innerHTML = originalContent;
        
        return false;
    } catch(e) {
        console.error('导出PDF出错:', e);
        // 发生错误时确保页面恢复
        document.body.innerHTML = originalContent;
        return false;
    }
})();

使用方法

打开你想要导出的 CSDN 文章页面
按下 F12 打开浏览器开发者工具
切换到 Console 面板
复制上述代码并粘贴到控制台中
按下 Enter 执行代码
在弹出的打印对话框中，选择 "保存为 PDF" 选项
选择保存位置和文件名，点击 "保存"

希望本文介绍的知识可以解决你的烦恼。

如果文章帮助到你了，可以点个赞让我知道，我会很快乐~加油！