打印博客内容

方法一:提取元素打印

步骤:

1、打开浏览器,点击右上角的三点,点击更多工具中的开发人员工具:
在这里插入图片描述
2、进入控制台,如下图所示:
在这里插入图片描述
3、在控制台添加如下代码并回车:


function doPrint(){
        var head_str = "<html><head><title></title></head><body>"; //先生成头部
        var foot_str = "</body></html>"; //生成尾部
        var older = document.body.innerHTML;
        //var new_str = document.getElementById('wrapper').innerHTML; //获取指定打印区域
	var new_str = document.getElementsByClassName('blog-content-box')[0].innerHTML; //获取指定打印区域
        var old_str = document.body.innerHTML; //获得原本页面的代码
        document.body.innerHTML = head_str + new_str + foot_str; //构建新网页
        window.print(); //打印刚才新建的网页
        document.body.innerHTML = older; //将网页还原
        return false;
        };
doPrint();

方法二:隐藏不打印元素
上述步骤中代码如下所示:


function doPrint() { 
	//隐藏标题栏
	$('#csdn-toolbar').css('display','none');
	//隐藏评论区
	document.getElementsByClassName('comment-box')[0].style.display="none";
	//隐藏推荐栏
	var recommends = document.getElementsByClassName('recommend-box');
	for(var i=0;i<recommends.length;i++){
		recommends[i].style.display="none";
	}
	//隐藏广告
	$('#dmp_ad_58').css('display','none');
	//隐藏底部栏
	document.getElementsByClassName('template-box')[0].style.display="none";
	//隐藏左侧栏
	$('aside').css('display','none');
	//隐藏右侧工具栏
	document.getElementsByClassName('tool-box')[0].style.display="none";
	document.getElementsByClassName('csdn-side-toolbar')[0].style.display="none";
	//打印剩余内容
    window.print();
};
doPrint();
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值