浏览器打印

最新推荐文章于 2022-10-13 16:38:27 发布

jsd2honey

最新推荐文章于 2022-10-13 16:38:27 发布

阅读量481

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/jsd2honey/article/details/52230958

版权

前端专栏收录该内容

52 篇文章

订阅专栏

解决浏览器打印问题：

思路1：

用js原生打印

window.print();

自定义一个打印按钮：点击打印实现打印（把不需要的区域隐藏）

var tab=document.getElementById("ReportViewer_fixedTable");
    var trs=tab.getElementsByTagName("tr");
    for(var i=1;i<trs.length;i++){
        if(i==3){
                trs[i].style.display='none';
        }
    }

测试html

<html>
<head>
<script>
funtion print()
{
window.print();
}
</script>
</head>
<body>
<h1>测试内容</h1>
<input type="button" value="测试" οnclick="print()">
</body>
</html>

效果：

思路2：

用控件打印Lodop

官网：http://www.lodop.net/index.html
下载插件：http://www.lodop.net/download.html

测试html：

<html>
<head>
<script language="javascript" src="http://www.c-lodop.com/demolist/LodopFuncs.js"></script> 
<object  id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0>  
       <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0></embed> 
</object>
</head>
<body>


asdfsafsafdfa
<input type="button" value="ceshi" οnclick="prn1_preview()"/>
<script>
var LODOP; //声明为全局变量 
	function prn1_preview() {	
		CreateOneFormPage();	
		LODOP.PREVIEW();	
	};
function CreateOneFormPage(){
		LODOP=getLodop();  
		LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_表单一");
		LODOP.SET_PRINT_STYLE("FontSize",18);
		LODOP.SET_PRINT_STYLE("Bold",1);
		LODOP.ADD_PRINT_TEXT(50,231,260,39,"打印页面部分内容");
		LODOP.ADD_PRINT_HTM(88,200,350,600,"<h1>测试内容</h1>");
	};
</script>
</body>
</html>

效果：