jquery.wordexport.js打印echarts.js畫出的柱狀圖。
echarts畫出的圖是不能直接打印出來的(echarts的柱狀圖是用canvas畫出來的),而jquery.wordexport.js只能打印出圖片,所以我先把echarts柱狀圖換成圖片再去打印的。
用echarts.js的API中的getDataURL()方法:導出圖表圖片,返回一個 base64 的 URL,可以設置為Image
的src
。
<div id="tubi"></div> //柱狀圖位置 <img src="" id="tubiimg" style="display: none;" /> //后台傳回來的圖片路徑(后台傳回來的圖片保存在本地項目中) <div id="main"></div> <img src="" id="tubiimg1" style="display: none;" /> <div id="pic1"></div> <img src="" id="tubiimg2" style="display: none;" /
傳回來圖片路徑之后,將之前的echarts柱狀圖替換成圖片再去打印。
var picInfo = myChart.getDataURL();//獲取柱狀圖的base64 echartImg(picInfo,"tubiimg","tubi"); //替換成圖片 // 將echart的圖保存成圖片 function echartImg(baseimg,img,div){ $.ajax({ type:"post", url:'{:url('imgss')}', data:{base64Info:baseimg}, async:"false", dataType:"json", success:function(data){ console.log(data); if(data.code==0){ $("#"+img).attr("src","/"+data.src); $("#"+img).show(); $("#"+div).hide(); } } }) }