纯前端word导出echarts图表

最新推荐文章于 2024-07-24 10:40:47 发布

前进的探索者

最新推荐文章于 2024-07-24 10:40:47 发布

阅读量1.4k

点赞数 4

分类专栏：手机端前端文章标签： echarts word导出

本文链接：https://blog.csdn.net/b0303/article/details/107228069

版权

前端同时被 2 个专栏收录

44 篇文章 1 订阅

订阅专栏

手机端

25 篇文章 0 订阅

订阅专栏

本文分享了一位前端开发者如何通过前端技术，利用ECharts和相关库如FileSaver.js和jquery.wordexport.js实现了导出Word的功能，展示了从HTML结构到实际代码的完整流程，适用于需要在没有后端干预下完成数据可视化的场景。

摘要由CSDN通过智能技术生成

项目中遇到导出echarts导出word，查到很多资料都没有纯前端导出，都是后端结合才能导出，作为前端怎么可能屈服于后端，经过不懈的努力终于在前端就能搞完了。

啥也不说直接上代码：

<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="width=device-width" />
		<meta charset="UTF-8"/>
		<title>EChart柱状图</title>
        <!-- script 引入顺序尽量不要变，预防出现导出错误-->
		<script src="../js/jquery-1.8.min.js"></script>
		<script src="FileSaver.js"></script>
		<script src="jquery.wordexport.js"></script>
		<script src="../js/echarts.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<a class="word-export" href="javascript:void(0)"> 导出 </a>
		<div id="page-content">
			<table>
				<thead>
					<tr>
						<td>第一列</td>
						<td>第二列</td>
						<td>第三列</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>11</td>
						<td>12</td>
						<td>13</td>
					</tr>
					<tr>
						<td>21</td>
						<td>22</td>
						<td>23</td>
					</tr>
					<tr>
						<td>31</td>
						<td>32</td>
						<td>33</td>
					</tr>
					<tr>
						<td>41</td>
						<td>42</td>
						<td>43</td>
					</tr>
					<tr>
						<td>51</td>
						<td>52</td>
						<td>53</td>
					</tr>
				</tbody>
			</table>
			<div id="container" class="chart" style="height: 600px;width: 600px;display: inline-block;"></div>
			<img id="img_Charts" style="display: none;"/>
		</div>	
	</body>
	<script type="text/javascript">
		


		var dom = document.getElementById("container");
		var myChart = echarts.init(dom);
		var app = {};
		option = null;
		var data = genData(50);
		
		option = {
			title: {
				text: '同名数量统计',
				subtext: '纯属虚构',
				left: 'center'
			},
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c} ({d}%)'
			},
			legend: {
				type: 'scroll',
				orient: 'vertical',
				right: 10,
				top: 20,
				bottom: 20,
				data: data.legendData,
				selected: data.selected,
				
			},
			
			series: [{
				name: '姓名',
				type: 'pie',
				radius: '55%',
				animation: false,
				center: ['40%', '50%'],
				data: data.seriesData,
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}]
		};
		function genData(count) {
			var nameList = [
				'赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', 
				'朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', 
				'戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', 
				'鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', 
				'费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', 
				'乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', 
				'和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', 
				'计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', 
				 '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
			];
			var legendData = [];
			var seriesData = [];
			var selected = {};
			for(var i = 0; i < count; i++) {
				name = Math.random() > 0.65 ?
					makeWord(4, 1) + '·' + makeWord(3, 0) :
					makeWord(2, 1);
				legendData.push(name);
				seriesData.push({
					name: name,
					value: Math.round(Math.random() * 100000)
				});
				selected[name] = i < 20;
			}

			return {
				legendData: legendData,
				seriesData: seriesData,
				selected: selected
			};
			

			function makeWord(max, min) {
				var nameLen = Math.ceil(Math.random() * max + min);
				var name = [];
				for(var i = 0; i < nameLen; i++) {
					name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
				}
				return name.join('');
			}
		};
		if(option && typeof option === "object") {
			myChart.setOption(option);
			var picInfo = myChart.getDataURL(); //这是重点，你要获取到这个函数，在echarts中自带
		}
		
		$("a.word-export").click(function(event) {
			$("#page-content").wordExport("aaa");
		});
		var img = new Image();  //重头戏在这 图标的大小
		img.src = myChart.getDataURL({
			type: "png",
//			pixelRatio: 2, //放大2倍
			backgroundColor: '#fff'
		});
		$('#img_Charts').attr('src', img.src); //能不能导出就看他了。因为base64 获取不到就没有图标
	</script>

</html>

效果图：

前进的探索者

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
11
评论
纯前端word导出echarts图表

项目中遇到导出echarts导出word，查到很多资料都没有纯前端导出，都是后端结合才能导出，作为前端怎么可能屈服于后端，经过不懈的努力终于在前端就能搞完了。啥也不说直接上代码：<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width" /> <meta charset="UTF-8"/> <title>ECh
复制链接

扫一扫

专栏目录