作为一名资深的CSDN摸鱼程序员,经常在这里看到很多让人拍案而起的好文章,如何将这些文章提取成pdf文件并且下载下来,供自己品味呢?
![在这里插入图片描述](https://img-blog.csdnimg.cn/img_convert/6973cf8c1f431e39c8f5525e15e787c0.png#pic_center)
新CSDN文章一键打印、输出PDF(自动阅读全文、全清爽模式) 之前的方法出现的问题是打印出的预览图会有右边一大片空白,这个方法实现将空白去掉
一、功能及修改方法
使用方法:按“F12”进入开发者工具,将以下js复制到 console,回车即可一键打印。功能: 自动“展开阅读全文”。 删除顶栏、侧栏、相关文章展示、浏览信息、广告、点赞等多余信息。真正的全清爽模式。 自动输出打印预览。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200927105630878.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYxODkwNg==,size_16,color_FFFFFF,t_70#pic_center#pic_center)
(function(){
'use strict';
var articleBox = $("div.article_content");
articleBox.removeAttr("style");
$("#btn-readmore").parent().remove();
$("#side").remove();
$("#comment_title, #comment_list, #comment_bar, #comment_form, .announce, #ad_cen, #ad_bot").remove();
$(".nav_top_2011, #header, #navigator").remove();
$(".csdn-side-toolbar,.template-box,.reward-user-box").remove();
$(".p4course_target, .comment-box, .recommend-box, #csdn-toolbar, #tool-box,#dmp_ad_58, .more-toolbox, .article-info-box, .btn-readmore").remove();
$("aside").remove();
$(".tool-box").remove();
$("main").css('display','content');
$("main").css('float','left');
$("#mainBox").css('width','100%');
$(".main_father.clearfix.d-flex.justify-content-center").css("width","100%"); //显示不全关键在于修改这里的width的比例
window.print(); // 修改成 90% 基本就可以显示全
})();
二、其他问题
保存为PDF。将打印机改成“另存为PDF”即可。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200927105902477.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYxODkwNg==,size_16,color_FFFFFF,t_70#pic_center#pic_center)
更多设置。 有的文章页边缘的字会被剪切掉一部分。 “边距”选择“无”即可解决。 使用缩放(例如设置“80%”),把整体缩小就不会超过页面了。 可以关闭页眉页脚等。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200927105902477.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYxODkwNg==,size_16,color_FFFFFF,t_70#pic_center#pic_center)
优化部分 此方法增加了修改删除以下信息,真正的全清爽打印输出: (1)自动“展开阅读全文”,自动打印全文。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200927110058798.bmp#pic_center#pic_center)
(2)新版整体页面会右移的问题。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200927110115538.bmp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYxODkwNg==,size_16,color_FFFFFF,t_70#pic_center#pic_center)
(3)文章头部的浏览信息:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200927110126446.bmp#pic_center#pic_center)
(4)文章底部的点赞信息,底部的广告信息 (5)文章右边的“举报置顶”框 。
最后非常感谢大佬们的文章,附上原文链接,点我噢~。以后遇到好的文章可以直接下载啦~
|