jeesite项目中去除页眉页脚和echarts图表的打印

给jeesite项目添加打印功能

方式一：window.print()

不好用，不多说了，可以自行百度！

方式二：使用Jqprint

jquery.jqprint-0.3.js下载地址

把jquery.jqprint-0.3.js的文件夹扔进来。

然后在你的jsp文件中引入这个js。

	<script src="${ctxStatic}/jquery/jquery-migrate-1.1.1.min.js"></script>
	<script src="${ctxStatic}/jquery.jqprint/jquery.jqprint-0.3.js"></script>

添加一个按钮。

		<a class="btn" href="#" onclick="print_click()">打印</a>

按钮点击事件，pagesetup_null()/pagesetup_default()可以没有。

<script language="javascript">
	function print_click(){
		pagesetup_null();//使用页眉页脚为空的打印设置
		$("#Myprint").jqprint({});  
		pagesetup_default();//使用页眉页脚为默认值的打印设置
	}
</script>

这里的Myprint就是我们所要打印的东西的标识符，用div把想要打印的东西扩进来。

<div id="Myprint"> 
	//需要打印的内容，例如：
	<div class="control-group">
		<div class="span2">企业名称：</div>
		<div class="span2">${tblQy.mch}</div>
	</div>
	...
</div>

pagesetup_null();是自定义的将打印设置中页眉页脚为空的函数，其定义如下：

function pagesetup_null(){ 
    try{ 
        var RegWsh = new ActiveXObject("WScript.Shell") 
        hkey_key="header" 
        RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"") 
        hkey_key="footer" 
        RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"") 
    }catch(e){} 
} 

pagesetup_default();是自定义的将打印设置还原的函数，其定义如下：

function pagesetup_default(){ 
    try{ 
        var RegWsh = new ActiveXObject("WScript.Shell") 
        hkey_key="header" 
        RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"&w&b页码，&p/&P") 
        hkey_key="footer" 
        RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"&u&b&d") 
    }catch(e){} 
} 

运行看一下，打印的效果。

关于echarts图表打印不出来的解决方案

如果你的项目中使用了echarts图表，那么你可能遇到和我一样的问题，就是echarts图表打印不显示的问题，这里给出一个详细的解决方案。

首先，来看一下我们echarts的实现方式。
先定义一个选择器，规范大小。

<div class="span10"><div id="zhlMap" style="width:800px;height:300px;"></div></div>

然后定义一个渲染echarts图表的函数。

function showZhlEcharts(){
	var allChart = echarts.init(document.getElementById('zhlMap'));
	allChart.clear();
	var option = {
		...
    };
    // 使用刚指定的配置项和数据显示图表。
    allChart.setOption(option);
 }

通过去调用函数，实现在该区域填充这样的echarts图表。

$(document).ready(function() {
			showZhlEcharts();
});

这样的echarts图表一般也包含一些动画和交互，其在打印中是无法打印的。

为了解决这个问题，在打印时我们将echarts图表转化成img，以便其能够被打印出来。
我们一起来看一下。

1在同一位置定义一个同样大小的img，不可见

	<div class="row">
		<div class="span10"><div id="zhlMap" style="width:800px;height:300px;"></div></div>
		<div class="span10"><img id="zhlImg" style="width:800px;height:300px;display:none;" ></div>
	</div>

关键点：同位置，同大小，不可见

2在对应的echarts填充函数下，将echarts转化成图片赋给img

function showZhlEcharts(){
	var allChart = echarts.init(document.getElementById('zhlMap'));
	allChart.clear();
	var option = {
		...
    };
    allChart.setOption(option);
    //**********************给img赋值**********************
    var img = document.getElementById('zhlImg');
    img.src = allChart.getDataURL({
    	pixelRatio: 2,
    	backgroundColor: '#fff'
    });	 

3如果你的echarts带有动画，要先关闭动画，赋值，再开启动画

function showZhlEcharts(){
	var allChart = echarts.init(document.getElementById('zhlMap'));
	allChart.clear();
	var option = {
	//**********************关闭动画**********************
		animation : false,
		...
    };
    allChart.setOption(option);
    var img = document.getElementById('zhlImg');
    img.src = allChart.getDataURL({
    	pixelRatio: 2,
    	backgroundColor: '#fff'
    });	 
    //**********************开启动画**********************
    allChart.setOption({animation:true});

4最后在点击事件这里设置可见的切换

原理：
我们浏览网页的时候，要看到的是有交互的echarts图表
然而打印的时候，打印器只认img图片
打印流程：
a.关闭echarts图表的可见，开启img可见
b.打印
c.开启echarts图表的可见，关闭img可见

function print_click(){
	pagesetup_null();
//**********************关闭echarts图表的可见，开启img可见**********************
	document.getElementById('zhlImg').style.display="block";
	document.getElementById('zhlMap').style.display="none";
	$("#Myprint").jqprint({});  
//**********************开启echarts图表的可见，关闭img可见**********************
	document.getElementById('zhlImg').style.display="none";
	document.getElementById('zhlMap').style.display="block";
	pagesetup_default();
}

我们来看一下效果：