开发一个导出功能,将echarts图表导出到excel文件中

本文档介绍了如何将ECharts图表导出到Excel文件中。首先,由于ECharts自身导出功能不满足需求,因此需要先将图表转换为图片,然后在后端将这些图片插入到Excel中。前端通过点击按钮触发事件,获取图表的Base64编码,并发送到后端。后端接收到图片数据,解码并保存为图片文件,最后生成Excel文件并将图片插入到相应位置。整个流程包括前端的图片数据获取和发送,以及后端的图片处理和Excel生成。
摘要由CSDN通过智能技术生成

    首先,做这个功能开发时,首先有几点必须弄清楚:1、echarts图表导出时该怎样导出到excel中,2、有没有图表自带的导出功能可用。经过我上网查阅相关资料以及去echarts官网查看API后,发现图表自带的导出功能不符合当前的业务需要,echarts图表导出必需转成图片,然后再将图片保存到excel中。

   开始,我写的导出过程:(步骤一)前端js导出按钮事件:

$('#export').jqxButton({width: 50, height: 27,template: "primary" }).on('click',function(){
        $("#imgUrl").val("");//清空
        imgUrl = myChart1.getDataURL({type:"png",backgroundColor:"#fff"});
        imgUrl+="#";
        imgUrl+= myChart2.getDataURL({type:"png",backgroundColor:"#fff"});
        imgUrl+="#";
        imgUrl+= myChart3.getDataURL({type:"png",backgroundColor:"#fff"});

        var actionUrl = currentSystemRootPath+pifx+"/exportExcelData.json";
        $("#imgUrl").val(imgUrl);
          var form = $("<form>");   
          $('body').append(form);  
              form.attr('style','display:none');   
              form.attr('target','');
              form.attr('method','post');
              form.attr('action', actionUrl);//下载文件的请求路径

              //对应查询
              var input1 = $('<input>'); 
              input1.attr('type','hidden'); 
              input1.attr('name','imgUrl'); 
              input1.attr('value',$("#imgUrl").val());
              form.append(input1)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值