1.利用 jquery.wordexport.js 插件将Echarts图表导出到word文档
你好! 经过简单测试,不利用后台也可以将Echarts图表导出到word文档。
需要修改插件源码,以及简单设置html元素。 说下原理:1. html中设置一个与echarts图表相同style的元素,包裹一个空白的image元素, 初始隐藏;2. echarts图表 -> getDataURL() -> 获取到对应的base64编码;3. 将编码赋值给上面image元素的src;4. 导出word前,将echarts图表隐藏,显示 步骤1 中的元素;5. 修改插件源码,在源码中处理image元素的地方,对src属性进行了base64编码的判断, 并做响应的处理。
其中非base64格式的,会在图片后面插入一个canvas元素;6. 由于第5点中,会在图片后面插入一个canvas元素,页面会有空白内容出现, 从而影响美观。解决方案是在页面设置一个隐藏元素,调用导出函数之前, 将含有导出内容赋值给这个隐藏元素,然后将这个隐藏元素的内容导出word即可。
当然如果页面其他图片都是base64编码的情况下,直接调用导出函数即可。部分代码片段: html片段 。
我是一只小小鸟I'm a little bird。
Hello, world!php..
。。
jsjQuery(document).ready(function($) { initChart(); $("a.jquery-word-export").click(function(event) { var picBase64Info = myChart.getDataURL(); $("#img_charts").attr("src", picBase64Info); $("#main").hide(); $("#imgDiv").css("display", "block"); setTimeout(function(){ $("#page-content2").html($("#page-content").html()); $("#page-content2").find("div:eq(0)").text("我是一只大灰狼..The Big Bad Wolf"); $("#page-content2").wordExport('测试'); }, 3000); });}); 源码修改 var isBase64 = function(src) { _regex = /^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@\/?%\s]*?)\s*$/i; return _regex.test(src); }; // Embed all images using Data URLs var images = Array(); var img = markup.find('img'); for (var i = 0; i < img.length;="" i++)="" {="" calculate="" dimensions="" of="" output="" image="" var="" w="Math.min(img[i].width," options.maxwidth);="" var="" h="img[i].height" *="" (w="" img[i].width);="" create="" canvas="" for="" converting="" image="" to="" data="" url="" if="" (isbase64(img[i].src))="" {="" var="" uri="img[i].src;" images[i]="{" type:="" uri.substring(uri.indexof(":")="" +="" 1,="" uri.indexof(";")),="" encoding:="" uri.substring(uri.indexof(";")="" +="" 1,="" uri.indexof(",")),="" location:="" uri,="" data:="" uri.substring(uri.indexof(",")="" +="" 1)="" };="" }="" else="" {="" var="" img_id="#" +="" img[i].id;="">