自动获取知乎、牛客、CSDN文章正文部分并分页导出下载打印
- 一、功能说明
- 二、功能展示
- 三、操作步骤
- 1.打开浏览器开发者工具
- 2.方法一：手动操作（直观、个性化）
- 3.方法二：自动化处理（批量快速处理）
- （1）知乎问答
- （2）知乎文章
- （3）牛客帖子
- （4）CSDN博客
- 4.进阶操作：代码编写方法
- （1）寻找网页元素对应的代码名称
- ① 直接通过选择元素找到对应的class或id
- ② 找到相关目录列表里的class或id
- ③ 在 Element-Styles（元素-样式） 界面复制selector
- （2）程序中加入相关元素删除的代码
- 四、异常情况
- 1.浏览器Console（控制台）的代码栏无法粘贴代码
- 2.导出的文档结构混乱 / 不紧凑
一、功能说明
网上存在很多资料，若要导出学习，一般有以下3种方式：
- 保存为网页文件html、mhtml（网页界面：右键 → 另存为）
- 打印网页 / 保存为pdf
① 网页直接操作（网页界面：右键 → 打印 → 目标打印机 - 打印机 / PDF）
② PDF浏览器读取网页并创建（PDF浏览器：文件 → 创建 → 从网页创建PDF） - 手动摘录
若想批量整理资料并做笔记，使用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结构混乱或不紧凑，则需尝试其他方法（可参考文章第一部分：功能说明）
参考
- 如何“干净”地下载CSDN博客文章并存为PDF？
- 如何把网页不改变原貌地转换单页的PDF？
