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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM