jquery.wordexport.js打印echarts.js画出的柱状图

jquery.wordexport.js打印echarts.js画出的柱状图。

echarts画出的图是不能直接打印出来的(echarts的柱状图是用canvas画出来的),而jquery.wordexport.js只能打印出图片,所以我先把echarts柱状图换成图片再去打印的。

用echarts.js的API中的getDataURL()方法:导出图表图片,返回一个 base64 的 URL,可以设置为Imagesrc

       <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();
                 }
            }
        })
    }

 

posted @ 2019-05-06 20:57  Ananiah  阅读(1198)  评论(0编辑  收藏  举报