zoukankan      html  css  js  c++  java
  • 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();
                     }
                }
            })
        }
  • 相关阅读:
    mysql 的远程链接字符
    SqlSessionFactoryUtil
    mysql 的链接字符
    web 项目运用通用的xml配置
    配置文件转意符使用
    new和newInstance的区别
    子选择器与后代选择器的区别
    Vivado_HLS 学习笔记1-数据类型
    Vivado_HLS 学习笔记3-循环的pipeline与展开
    Vivado_HLS 学习笔记2-接口综合
  • 原文地址:https://www.cnblogs.com/Ananiah/p/10822041.html
Copyright © 2011-2022 走看看