如何清爽打印或保存 CSDN 页面为 PDF 文件

如何清爽打印或保存 CSDN 页面为 PDF 文件

作为一名学生，我在日常学习中经常会参考 CSDN 博客的文章。但是当我需要打印或者保存为 PDF 文件时，总会被页面上的广告、侧边栏和其他多余的内容困扰，打印出来的效果并不理想。经过一些研究，我发现可以通过简单的 JavaScript 代码实现页面的清爽打印。以下是我的操作方法和分享，希望对大家有帮助！

参考博客：点击这里跳转

---

功能介绍

使用下面的方法，可以实现以下功能：

1. 自动展开“阅读全文”内容，无需手动点击。
2. 删除页面上的广告、侧边栏、点赞收藏栏等多余信息，只保留核心内容。
3. 自动调整打印缩放比例，避免页边内容被裁剪。
4. 支持将页面直接保存为清爽的 PDF 文件。

---

操作方法

只需简单几个步骤即可实现：

步骤 1：打开开发者工具

在 CSDN 博客文章页面，按下 F12 键，打开开发者工具，切换到 Console（控制台） 选项卡。

步骤 2：复制代码

将以下代码复制到控制台中：

(function(){
    'use strict';
    var articleBox = $("div.article_content");
    articleBox.removeAttr("style");
    $(".hide-preCode-bt").parents(".author-pjw").show();
    $(".hide-preCode-bt").parents("pre").removeClass("set-code-hide");
    $(".hide-preCode-bt").parents(".hide-preCode-box").hide().remove();
    $("#btn-readmore").parent().remove();
    $("#side").remove();
    $(".csdn-side-toolbar, .template-box, .blog-footer-bottom, .left-toolbox, .toolbar-inside").remove();
    $(".comment-box, .recommend-box, .more-toolbox, .article-info-box, .column-group-item").remove();
    $("aside, .tool-box, .recommend-nps-box, .skill-tree-box").remove();
    $("main").css('display','content'); 
    $("main").css('float','left'); 
    $("#mainBox").width("100%");        
    document.getElementsByTagName('body')[0].style.zoom=0.8;
    window.print();
})();
 

步骤 3：按回车执行代码

在控制台中按回车，代码会自动执行：

• 页面中的所有广告、侧边栏和无关内容将被清除。
• 自动进入打印预览界面。

步骤 4：保存为 PDF 文件

在打印预览中，将打印机设置为 “另存为 PDF”，点击保存即可完成。

下面是实际操作的结果可以看看，一般个人用时足够了

pdf效果图见附件pdf