echarts（下载图片、预览打印）

程序员文章站 2022-05-12 22:03:31

...

公司需求是使用echarts图表进行数据统计，这些统计图表具有保存为图片及打印功能。

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>第一个 ECharts 实例</title>
	<!-- 引入 echarts.js -->
	<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
	<style>
		<!-- 打印的时候，隐藏设置该类的元素，从而实现打印指定区域（PS：好像刚开始的时候生效了，但之后没有用） -->
		@media print{
			.noprn {
				display: none;
			}
		}
	</style>
</head>

<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div class="noprn">第一个 ECharts 实例</div>
	<div id="main" style="width: 600px;height:400px;"></div>
	<div class="noprn" id="printImg">打印</div>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));

		// 指定图表的配置项和数据
		var option = {
			title: {
				text: '第一个 ECharts 实例'
			},
			tooltip: {},
			toolbox: {
				show: true,
				right: '20px',
				feature: {
					// 下载保存为图片
					saveAsImage: {
						show: true,
						title: '下载'
					}
				}
			},
			// 将动画效果属性设置为false：解决获取到的echarts图不全的问题（只有坐标轴）
			animation: false,
			legend: {
				data: ['销量']
			},
			xAxis: {
				data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
			},
			yAxis: {},
			series: [{
				name: '销量',
				type: 'bar', //柱状图 line：折线图 
				data: [5, 20, 36, 10, 10, 20],
				markPoint: {
					data: [{
						type: "max",
						name: "Max"
					}, {
						type: "min",
						name: "Min"
					}]
				},
				markLine: {
					data: [{
							type: "average",
							name: "Avg"
						},
						[{
							symbol: "none",
							x: "90%",
							yAxis: "max"
						}, {
							symbol: "emptyCircle", //折线处，即点的形状 
							label: {
								position: "start",
								formatter: "Max"
							},
							type: "max",
							name: "Top"
						}]
					]
				}
			}]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);

		var printBtn = document.getElementById('printImg');
		var canvas = document.querySelector('#main canvas');
		var dataUrl = canvas.toDataURL();

		printBtn.onclick = function () {
			// doPrintByFrame(dataUrl);
			doViewAndPrint(dataUrl);
			// 打印预览：打印当前页所有内容，且火狐上无法预览
			// window.print();
		};

		// 预览：因为使用window.print火狐无法预览，因此采用新打开一个窗口的方式用来展示被打印的内容
		// 打印指定区域内容：通过只将需打印的内容添加到新窗口中，实现打印指定区域
		function doViewAndPrint(canvasUrl) {
			const domPrint = document.createElement('img');
			domPrint.src = canvasUrl;
			domPrint.onload = function () {
				page.print(); // 打印
				page.close(); // 关闭打印窗口
			};
			let page = window.open('', '_blank'); // 打开一个新窗口，用于打印
			page.document.body.appendChild(domPrint);
		}

		// 打印指定区域内容：创建iframe，同样是通过将需打印的内容添加到iframe中实现（当前窗口即可完成，不需打开新窗口）
		function doPrintByFrame(canvasUrl) {
			//判断iframe是否存在，不存在则创建iframe
			var iframe = document.getElementById("print-iframe");
			const domPrint = document.createElement('img');
			domPrint.src = canvasUrl;
			if (!iframe) {
				iframe = document.createElement('IFRAME');
				var doc = null;
				iframe.setAttribute("id", "print-iframe");
				iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
				document.body.appendChild(iframe);
				doc = iframe.contentWindow.document;
				//这里可以自定义样式
				//doc.write("<LINK rel="stylesheet" type="text/css" href="css/print.css">");
				doc.body.appendChild(domPrint);
				doc.close();
				iframe.contentWindow.focus();
			}
			domPrint.onload = function () {
				iframe.contentWindow.print(); // 打印
				document.body.removeChild(iframe);
			};
		}
	</script>
</body>

</html>

遇到的问题：

1、获取到的图表不全，没有柱形：将动画效果设置为false，即animation: false；

2、打印指定区域：

直接使用window.print(）方法打印的是整个页面内容，解决思路：将需要打印区域的内容重新放进新窗口或iframe中调用该方法，也可先覆盖原内容打印后，再恢复原内容。

在这儿遇到了一个问题是有可能出现白屏，原因是img标签已创建，但未渲染，使用window.onload未生效，因此采用img标签的onload方法，即图片加载完成后执行打印。

3、火狐浏览器无法预览：

上网查询后，得出是火狐浏览器出于安全考虑。打印时无法预览，因此，查询后，采用打开一个新窗口并将打印区域的内容展示在新窗口中的方法实现“预览”。

其他打印方法：lodop插件（未尝试）

借鉴：https://www.cnblogs.com/30go/p/9788990.html（局部打印方式）

https://www.cnblogs.com/24klr/p/11284014.html（firefox新开窗口预览思路）

https://ask.csdn.net/questions/162943?sort=votes_count（图表内容不全）

echarts（下载图片、预览打印）

使用DevExpress的PdfViewer实现PDF打开、预览、另存为、打印(附源码下载)

基于DevExpress的SpreadsheetControl实现对Excel的打开、预览、保存、另存为、打印(附源码下载)

PS打印预览界面怎么调节图片的大小等参数?

使用DevExpress的PdfViewer实现PDF打开、预览、另存为、打印(附源码下载)

JS端实现图片、视频时直接下载而不是打开预览

通过文件流下载、预览图片，以及导出Excel表格

php下载问题，下载后文件内容是空的，图片也没有预览

php下载问题，下载后文件内容是空的，图片也没有预览

js操作-页面元素转canvas并打印或转成图片下载

echarts（下载图片、预览打印）