【新】CSDN文章一键打印、输出PDF(自动阅读全文、全清爽模式)

版权声明:本文为丨匿名用户丨原创文章,转载请注明出处:【新】CSDN文章一键打印、输出PDF(自动阅读全文、全清爽模式)_丨晋丨-CSDN博客_csdn打印https://blog.csdn.net/p1279030826/article/details/106602341

该方法在 CSDN文章直接打印,或者保存PDF(去掉多余内容)上改进而来。

目录

一、功能及使用方法

二、两种获取方法

方法一:移除法(2022/08/08更新)

方法二:HTML重新构建法(2020/10/31新增)

三、其他问题

四、优化日志


一、功能及使用方法

使用方法:按“F12”进入开发者工具,将以下js复制到 console,回车即可一键打印。 

功能

  • 1、自动“展开阅读全文”
  • 2、删除顶栏、侧栏、相关文章展示、浏览信息、广告、点赞等多余信息。真正的全清爽模式。
  • 3、自动输出打印预览
  • 4、自动缩放打印页面、避免页边缘内容被裁剪。(2020/10/31 新增)
  • 5、自动展开折叠的代码段(2022/8/8 新增)

【新】CSDN文章一键打印、输出PDF(自动阅读全文、全清爽模式)_第1张图片

二、两种获取方法

方法一:移除法(2022/08/08更新)

更新内容:增加 自动展开折叠的代码段 功能

注:如果发现打印预览的时候每一页顶部都有标题,请参照下面第三步去掉“页眉和页脚”的勾选

(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();
})();

方法二:HTML重新构建法(2020/10/31新增)

该方法与方法一功能一致,代码更加简洁,打印完自动还原网页,并且后续CSDN增加其他多余模块也不会有影响。

(function doPrint(){      
	'use strict';
	var articleBox = $("div.article_content");
	articleBox.removeAttr("style");
	var head_str = "";       
	var foot_str = "";   
	var older = document.body.innerHTML;       
	var title= document.getElementsByClassName('article-title-box')[0].innerHTML; 
	var main_body = document.getElementsByClassName('article_content')[0].innerHTML;
	document.body.innerHTML = head_str + title + main_body + foot_str;
	$("#mainBox").width("100%");
	document.getElementsByTagName('body')[0].style.zoom=0.8;     
	window.print();
	document.body.innerHTML = older;
	return false;
})();

 

三、其他问题

1、保存为PDF。将打印机改成“另存为PDF”即可。

【新】CSDN文章一键打印、输出PDF(自动阅读全文、全清爽模式)_第2张图片

2、更多设置。(2020/10/30 方法已在代码内新增自动设置

(1)有的文章页边缘的字会被剪切掉一部分。

  • “边距”选择“无”即可解决。
  • 使用缩放(例如设置“80%”),把整体缩小就不会超过页面了。

【新】CSDN文章一键打印、输出PDF(自动阅读全文、全清爽模式)_第3张图片

(2)可以关闭页眉页脚等。

【新】CSDN文章一键打印、输出PDF(自动阅读全文、全清爽模式)_第4张图片

四、优化日志

此方法增加了修改删除以下信息,真正的全清爽打印输出:

(1)自动“展开阅读全文”,自动打印全文。

(2)新版整体页面会右移的问题。

【新】CSDN文章一键打印、输出PDF(自动阅读全文、全清爽模式)_第5张图片

(3)文章头部的浏览信息:

(4)文章底部的点赞信息,底部的广告信息: 

【新】CSDN文章一键打印、输出PDF(自动阅读全文、全清爽模式)_第6张图片

(5)文章右边的“举报置顶”框 。

============================20200906更新=================================

(6)底部的信息栏

============================20201031更新=================================

(7)底部的版权信息栏

不知道是不是模块名称更改了,信息栏又重新出现了,这里更新一下去掉底部的版权信息栏

(8)自动缩放打印页面

打印预览时发现内容被裁剪了,还得手动修改一下缩放比例,太麻烦,这里更新自动设置缩放。(方法参考:缩放打印)

(9)新增一种实现方法

方法二:HTML重新构建法

============================20210913更新=================================

(10)【方法一】移除顶部“文章所属专栏框”

 (11)【方法一】移除每页底部出现的“点赞收藏信息栏”

 (12)【方法一】精简代码,删除一些过时的模块

============================20220325更新=================================

(13)移除底部相关推荐的评价栏

============================20220808更新=================================

(14)移除文章底部的技能树匹配推荐栏

(15)【方法一】增加“自动展开折叠的代码段”功能(方法二已经支持)

【新】CSDN文章一键打印、输出PDF(自动阅读全文、全清爽模式)_第7张图片

 

 

参考链接:阅读、JS/Jquery_实现打印页面指定div的方法

你可能感兴趣的:(其他,CSDN,打印,PDF)