使用JS打印网页指定div内容（示例：打印CSDN博客）

作者：Li_阴宅 | 2024-08-12 23:09:33

踩

方法一：提取元素打印

步骤：

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();

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】