如何打印CSDN博文和博客园博文

最新推荐文章于 2024-03-26 10:05:12 发布

Mr_Wang_up

最新推荐文章于 2024-03-26 10:05:12 发布

阅读量1.3k

点赞数 4

分类专栏：一些实用小技巧

本文链接：https://blog.csdn.net/qq_42031142/article/details/109813501

版权

一些实用小技巧专栏收录该内容

7 篇文章 1 订阅

订阅专栏

相信大家看到一些比较不错的博文，都想打印保存一下，但是浏览器自带的打印会发生覆盖的问题并且除了博文之外的文字也会被打印，很不友好；

这里提供一个新的方法：

1、打开想要打印的博文；

2、右键鼠标，选择检查，如图所示。

3、点击检查，进入如下页面，选中Console选项

4、在空白部分输入以下代码，回车，即可弹出打印页面，打印即可

代码一（不打印评论）：

(function doPrint(){
        //生成头部
        var head_str = "<html><head><title></title></head><body>"; 
        //生成尾部
        var foot_str = "</body></html>";
        //原本页面的代码
        var older = document.body.innerHTML;
        //指定打印区域的html
        var print = document.getElementsByClassName('blog-content-box')[0].innerHTML;
        //构建新网页
        document.body.innerHTML = head_str + print + foot_str; 
        //调用打印
        window.print();
        //打完后将网页还原
        document.body.innerHTML = older;
})();

代码二(评论也会一起打印)：

(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, .recommend-box, #csdn-toolbar, #tool-box,#dmp_ad_58, .more-toolbox, .article-info-box, .btn-readmore").remove();
	$("aside").remove();
	$(".tool-box").remove();
	$(".hide-article-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%");
	window.print();
})();

类似的对于博客园的论文，操作同上

代码为：

(function(){
    'use strict';
    $("#comment_form, #header, #leftmenu, #big_banner, #footer, #blog_post_info_block").remove();
    $("#content").css('margin','0');
    $("body").css('margin','0').css('padding','2px');
    window.print();
})();