博客动态
Hi!欢迎来到Jerry Coding!公众号垃圾分类增加学习功能,关注下面的公众号一起来帮助Jerry学习更多垃圾分类知识吧!
微信扫码

扫一扫关注我

More
关于
New
RSS

CSDN网页打印乱码重叠解决办法

2020年5月6日 Jerry 774 2020年6月20日

工作学习中,我们经常需要保存某个网页,ctrl+s的话会保存所有的 js css html 等文件,下载一个完整的文件夹,不是特别方便。我们常做的是将其打印成pdf格式保存,但是由于许多动态网页,打印出来可能乱码,看下怎么解决呢?

问题

举个栗子:下面这个网页看着不错,

https://blog.csdn.net/jerrycoding666/article/details/105430767 

我想打印成pdf文件保存,我们常做的就是右键网页打印,或者ctrl+p,

结果打印预览的网页和保存的pdf都是带侧栏或广告等乱七八糟的,正文信息不全或者重叠等等

解决

思路其实很简单,就是先把网页上无关的组件删掉再打印就完事啦,两种方法:

方法1、(适用所有网页)可以右键审查元素挨个删除。

比如说删除csdn网页的导航栏:

导航栏上右键,检查元素

找到导航栏代码,右键 delete element  导航栏就删掉了,其他的无用组件也是可以如此删除,最后只剩正文再打印即可。

这种方法比较适合乱七八糟组件比较少的网页,可以删除几个。对于像csdn这种无关组件非常多的网页,建议采用方法2:

方法2、浏览器console 直接运行js代码将无用组件删除。

谷歌浏览器 按F12打开控制台,找到console输入如下代码回车即可:

(function(){
    $("#side").remove();
    $(".toc").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();
    $(".more-toolbox").remove();
    $("#dmp_ad_58").remove();
    $(".csdn-side-toolbar").remove();
    $("main").css('display','content'); 
    $("main").css('float','left'); 
    $("main").css('width','1000px'); 
    $("main").css('margin-left','-300px'); 
    window.print();
})();

调整好其他比例选项,保存即可。没有乱七八糟的重叠或者广告了。

 


原创文章,转载请注明出处: https://jerrycoding.com/article/csdn-print

微信
支付宝

您尚未登录,暂时无法评论。请先 登录 或者 注册

0 人参与 | 0 条评论

每日一句 (From ONE)
有一些文字,它们使人能够生活,那是一些纯洁、天真的字。比如“热”,比如“信任”,“爱”,“正义”和“自由”。
微信扫码

扫一扫关注我

关于本站