window.print()打印页面

最新推荐文章于 2024-08-07 17:02:12 发布

weixin_37906108

最新推荐文章于 2024-08-07 17:02:12 发布

阅读量560

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_37906108/article/details/108283781

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用JavaScript和CSS优化网页打印布局的方法。通过移除不必要的DOM元素、调整宽度和生成适合打印的HTML结构，实现了更佳的打印效果。文章详细展示了如何构建适合打印的页面并还原原始页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用window.print()打印页面内容时

1、可以删除不必要dom标签构建一个适合打印的页面，然后执行window.print()。

2、在重新加载页面还原修改的页面

	doPrint : function(jgtz_id){
		
		//var older = document.body.innerHTML;
		
		$("a[class=font-red]").each(function(){
			    $(this).remove();
		});
		
		$("div[class=insertTab]").css('width','700px');
		$("table[class=sq]").css('width','700px');
		               
		var sMM = "<style media='print'> @page {size: auto; margin: 0mm;  }</style>";
        var head_str = "<html><head><title></title></head><body><div style='height:30px;width:100%;'></div><div id='baac'>" + sMM; //先生成头部
        var new_str = document.getElementById('printBody').innerHTML; //获取指定打印区域
        var foot_str = "</div></body></html>"; //生成尾部
        document.body.innerHTML = head_str + new_str + foot_str; //构建新网页
        window.print(); //打印刚才新建的网页
        
        window.location.reload();
        return false;
	}