方法一:提取元素打印
步骤:
1、打开谷歌浏览器,按F12 进入控制台:
2、控制台输入如下JS代码,按回车键(以打印csdn博客内容为例):
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();
3、在弹出的打印界面,布局选项里设置为横向(竖向布局存在行末内容不显示情况),然后保存即可:
注意:建议使用谷歌浏览器,亲测火狐浏览器可能导致页面内容混乱
方法二:隐藏不打印元素
方法一步骤2使用如下代码:
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();