【html】自动获取知乎、牛客、CSDN文章正文部分并分页导出下载打印

一、功能说明

网上存在很多资料，若要导出学习，一般有以下3种方式：

1. 保存为网页文件html、mhtml（网页界面：右键 → 另存为）
2. 打印网页 / 保存为pdf
   ① 网页直接操作（网页界面：右键 → 打印 → 目标打印机 - 打印机 / PDF）
   ② PDF浏览器读取网页并创建（PDF浏览器：文件 → 创建 → 从网页创建PDF）
3. 手动摘录

若想批量整理资料并做笔记，使用PDF文件最方便，但直接从网页导出PDF存在很多问题。以知乎为例，导出文件中会存在很多“无用模块”，且“悬浮栏”会遮挡部分文章内容，而一些方式导出的文件文字无法选中复制

而对于“PDF浏览器读取网页并创建PDF”的方法，转换较慢，且同样存在上述问题

本文介绍一种网页界面自动剔除无关信息模块，并导出博客正文的方法

二、功能展示

（1）知乎问答

（2）知乎文章

（3）牛客帖子

（4）CSDN博客

三、操作步骤

1.打开浏览器开发者工具

对于Chrome浏览器和Microsoft Edge浏览器，在网页界面“按下F12”或点击“右键 → 检查”，会打开网页开发者工具，其他浏览器方法类似。本文以Chrome浏览器为例进行展示

2.方法一：手动操作（直观、个性化）

点击开发者工具操作栏左上角的按钮“Select an element in the page to inspect it”（在页面中选择一个元素以进行检查），或是直接按“Ctrl + Shift + C”，进而可以选择网页元素

选中元素后，鼠标左键点击，右侧开发者工具操作栏会自动跳转到对应的代码位置，右键，并点击“Delete element”（删除元素）

可发现网页中该模块已消失

重复上述操作，可删除所有不感兴趣的元素。操作完成后，可打印并导出文档（右键 → 打印 → 目标打印机 - 打印机 / PDF）

3.方法二：自动化处理（批量快速处理）

自动化处理方法相当于将上述“手动操作”（方法一）程序化实现。

主要步骤为：网页加载完成后（缓存文章图片），根据上述方法打开浏览器的开发者工具，在Console（控制台）的代码栏输入下方给定代码，最终自动获取网页中文章正文部分，并导出下载为pdf文件

（1）知乎问答

打开问答网页（问题模块下方点击：分享 → 复制链接，并在新界面打开该回答的网页）

将代码复制到开发者工具的控制台代码栏

(function(){
$(".AppHeader-inner").remove();  // 删除上方浮动栏
$(".QuestionHeader").remove();  // 删除上方问题栏
$("a.QuestionMainAction").remove();  // 删除上方“查看全部回答”
$(".Question-sideColumn").remove();  // 删除侧边信息栏
$(".ContentItem-actions").remove();   // 删除下方浮动栏（赞同、评论等）
$(".CornerAnimayedFlex").remove();  // 删除返回顶部按钮
$(".List").remove();  // 删除底部“更多回答”
$("a.QuestionMainAction").remove();   // 删除底部“查看全部回答”
window.print();  // 打印网页
})();

即可自动提取正文并导出，效果如下

（2）知乎文章

将代码复制到开发者工具的控制台代码栏

(function(){
$(".ColumnPageHeader-Wrapper").remove();  // div class前面加"."；删除上方浮动栏
$(".ContentItem-actions").remove();  // 删除下方浮动栏（赞同、评论等）
//$(".Recommendations-Main").remove();  // 删除文末推荐阅读
$(".Post-Sub").remove();  // 删除文末评论、推荐阅读等
window.print();  // 打印网页
})();

即可自动提取正文并导出，效果如下

（3）牛客帖子

打开帖子网页（帖子模块下方点击：转发 → 复制链接，并在新界面打开该回答的网页）

将代码复制到开发者工具的控制台代码栏

(function(){
$(".el-header").remove();  // 删除牛客网信息栏
$(".main-user-top").remove();  // 删除上方浮动栏（作者信息）
$(".content-bottom-bar").remove();  // 删除下方浮动栏（点赞、收藏等）

$(".hotList ").remove();  // 删除侧方推荐信息栏“全站热榜”
$(".tw-overflow-hidden").remove();  // 删除侧方推荐信息栏“正在热议”
$(".tw-shadow-sm").remove();  // 删除侧方文章分享按钮

$(".question-recommend").remove();  // 删除文末推荐信息
$(".tw-rounded-lg").remove();  // 删除文末评论输入框
$(".comment-list").remove();  // 删除文末评论输入框下方空白
//$(".content-bottom-action").remove();  // 删除文末信息栏（点赞、收藏等）

$("#nc-content-allComments").remove();  // 删除文末“全部评论”文字
$(".tw-px-5").remove();  // 删除文末“评论内容”
//$(".comment-box").remove();  // 删除文末“评论内容”
$(".comment-pagination").remove();  // 删除文末“评论内容”页码栏
$(".recommend-text").remove();  // 删除文末“相关推荐”分割线

$(".tw-justify-between").remove();  // 删除底部牛客网企业联系信息
$(".tw-py-8").remove();  // 删除底部网页备案信息

window.print();  // 打印网页
})();

即可自动提取正文并导出，效果如下

（4）CSDN博客

将代码复制到开发者工具的控制台代码栏

(function(){
$("#side").remove();
$("#comment_title, #comment_list, #comment_bar, #comment_form, .announce, #ad_cen, #ad_bot").remove();
$(".nav_top_2011, #header, #navigator").remove();
$(".p4course_target, .comment-box, .recommend-box, #csdn-toolbar, #tool-box").remove();
$("aside").remove();
$(".tool-box").remove();
$(".left-toolbox").remove();  // div class前面加"."；删除下方信息栏（作者、文章点赞收藏）
$("#treeSkill").remove();  // div id前面加"#"；删除文末“知识所在数据库信息
$("#recommendNps").remove();  // 删除文末“推荐评价”（相关推荐对你有帮助么？）
$(".extension_official, .blog_extension_card").remove();  // 删除文末“推广信息”（如微信名片、微信公众号）
$(".blog-footer-bottom").remove();  // 删除文末CSDN网站备案信息
$("#dmp_ad_58").remove();
$("main").css('display','content'); 
$("main").css('float','center'); 
$(".btn-readmore").click();
window.print();  // 打印网页
$("tool-box").remove();
})();

即可自动提取正文并导出，效果如下

4.进阶操作：代码编写方法

（1）寻找网页元素对应的代码名称

方法二的自动化处理方法，本质上是对方法一手动操作的程序化实现。若需要调整代码，删除其他界面元素，仅需通过方法一中选择网页元素的方法，找到该元素对应的名称

① 直接通过选择元素找到对应的class或id

② 找到相关目录列表里的class或id

③ 在 Element-Styles（元素-样式） 界面复制selector

在开发者工具的Element（元素）界面，可看到Styles（样式 ）中有许多变量名称，选择其中一个进行尝试（名称处右键并点击Copy selector）

（2）程序中加入相关元素删除的代码

通过上述方法可以找到网页元素对应的class或id，只需在代码中删除该元素即可。若程序运行异常，则替换为元素的其他class / id名称，再次尝试运行

(function(){
// 其他代码……

$(".class的元素名称").remove();  // class前面加"."
$("#id的元素名称").remove();  // id前面加"#"

// 其他代码……
})();

注：若网页界面模块改变，则需要根据上述方法调整代码（需要删除的网页元素）

四、异常情况

1.浏览器Console（控制台）的代码栏无法粘贴代码

仅需在代码栏目输入allow pasting，回车即可

2.导出的文档结构混乱 / 不紧凑

若上述方法导出的PDF结构混乱或不紧凑，则需尝试其他方法（可参考文章第一部分：功能说明）

参考

1. 如何“干净”地下载CSDN博客文章并存为PDF？
2. 如何把网页不改变原貌地转换单页的PDF？