Echarts长图全图打印方案以及Demo

前面使用echarts做统计图表,做出来的echarts图横向宽度挺大的,都超出页面了,然后我设置了一个横向滚动条。

然后!需求要求有打印按钮,要将图表打印出来(突然好想砍掉需求方)… 然后悲催的发现,图表滚动条所到的地方才能被打印出来,然后其他的地方就被遮住了,就像下面那个样子…

有滚动条的echarts图打印不全

有滚动条的echarts图打印不全

怎么办呢?突然想到echarts可以转换成图片的,于是想到了可以在打印前将echarts转换为图片放在页面,然后缩放到指定宽度,然后再打印,打印完成后再切换回来!于是开始试验,最后发现方案可行,就有了下面的代码。

echars的展示就不写了,这里只写div的关系以及点击“打印”按钮时执行的js,页面打印是使用的jquery的插件jqprint,先看看DEMO,下面是主要代码:

html:

<div style="width:700px;overflow-x:auto;border:1px solid #ccc;" id="print"> <!-- 宽度限制的外框 -->
	<div id="chart-box" style="height:400px;width:1200px"></div> <!-- echarts框 -->
</div>

js:

// 创建图片区$imgBox
var $imgBox = $("#img-box");
var $chartBox = $("#chart-box");
if ($imgBox.length <= 0) {
	$chartBox.after('<div id="img-box"></div>');
	$imgBox = $("#img-box");
}

// 将echart生成图片并放入img-box,并显示图片img-box
$imgBox.html('<img src="' + myChart.getDataURL() + '"/>').css('display','block');
// 隐藏echart图chart-box
$chartBox.css('display','none');

// 调整img大小
var $img = $imgBox.find('img');
var imgWidth = $img.width();
var showWidth = 700; // 显示宽度,即图片缩小到的宽度
if (imgWidth > showWidth) { // 只有当图片大了才缩小
	var imgNewHeight = $img.height() / (imgWidth / showWidth);				
	$img.css({'width': showWidth + 'px', 'height': imgNewHeight + 'px'});
}

// 打印
$("#print").jqprint();

// 执行打印后再切换回来
// 显示echart图chart-box
$chartBox.css('display','block');
// 隐藏图片img-box
$imgBox.css('display','none');

// 因为浏览器执行比较宽,所以前端看不出来有什么变化

这样,就可以打印出全图了。

但是!这个方案还是有缺陷,如果echarts太长,会被缩小得比较小,导致看不清楚,不过,我暂时应该不会遇到,因为我能确定我的echarts图不会太长的,如果真的很长,我也有了方案,只是没有实现,下面分享出来:

可以先将echarts转为图片,然后复制多份列在页面,然后用js调整每个图片的css,让每张图片按顺序展示一部分,这样就可以展示全图了,并且可以全部打印下来,有兴趣的小伙伴可以试试。

本文《Echarts长图全图打印方案以及Demo》来自 www.juwends.com ,欢迎转载或CV操作,但请注明出处,谢谢!