jqueryword插件
- 作者: 香气CG
- 来源: 51数据库
- 2020-04-21
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;="">
