Echarts3之html2canvas下载图表（后续生成PDF）

最新推荐文章于 2024-01-24 17:16:05 发布

Dr.Zhu

最新推荐文章于 2024-01-24 17:16:05 发布

阅读量6.1k

点赞数 2

分类专栏： Echarts

本文链接：https://blog.csdn.net/zt_fucker/article/details/61920916

版权

Echarts 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

Echarts提供了下载图表的功能，但是仅仅满足客户端下载到本地，不经过项目本身的后台，对于高度自定义是不能满足的。
首先页面引入html2canvas插件。

<script src="//cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

然后引入Echarts。对应自己的echarts.js路径

<script src="<%=base %>/js/echart/echarts3.js" type="text/javascript" charset="utf-8"></script>

index.jsp页面

<%@ page language="java" pageEncoding="UTF-8"%>
<%--引入JSTL核心标签库 --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String base = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+""+request.getContextPath();
%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>province</title>
<link rel="stylesheet" type="text/css" href="<%=base %>/css/bootstrap/bootstrap.min.css" />
</head>

<body>
    <div class="container">
        <div id="pie" style="width: 800px; height: 500px; float: center;"></div>
    </div>
    <form action="uploadimg" method="post" id = "form">

                <input type="submit" value=""/>
    </form>
    <script src="//cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    <script src="<%=base %>/js/echart/echarts3.js" type="text/javascript" charset="utf-8"></script>
    <script src="<%=base %>/js/echart/province.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var Echart_01 = echarts.init(document.getElementById("pie"));
        var legend_data = [ '短暂性脑缺血发作', '脑梗死', '脑内出血', '蛛网膜下腔出血', '其他未能分类的卒中' ];
        var data = [ {value : 7,name : '脑梗死'}, {value : 4,  name : '短暂性脑缺血发作'}, {value : 35,    name : '脑内出血'}, {value : 53,name : '蛛网膜下腔出血'}, {value : 83, name : '其他未能分类的卒中'} ];      
        var option = pie(legend_data, data);
        Echart_01.setOption(option);

        function convertCanvasToImage(canvas) {
            var image = new Image();
            image.src = canvas.toDataURL("image/jpeg");
            return image;
        }
        setTimeout(function() {
            html2canvas(document.getElementById('pie'), {
                onrendered : function(canvas) {
                    setTimeout(function() {
                        var img = convertCanvasToImage(canvas);
                        var input = document.createElement('input');
                        var form = document.getElementById('form');
                        console.log(form);
                        input.setAttribute('type', 'hidden');
                        input.setAttribute('name', 'data');
                        input.setAttribute('value', img.src);
                        form.appendChild(input1);
                        form.submit();
                    }, 2000)
                }
            });
        }, 2000);
    </script>
</body>
</html>

然后是province.js代码：

function pie(legend_data,data) {
    var option = {
        tooltip: {
            formatter: function(params, ticket, callback) {
                return params.name + " :<br/> " + params.value + " (" + params.percent + "%)";
            }
        },
        legend: {
            orient: 'vertical',
            right: 'right',
            data : legend_data
        },
        series: [{
            name: '病例数量',
            type: 'pie',
            radius: '50%',
            center: ['40%', '60%'],
            data: data,
            itemStyle: {
                normal: {
                    label: {
                        formatter: function(params, ticket, callback) {
                            return params.name + ":\r\n" + params.value + " (" + params.percent + "%)";
                        }
                    },
                }
            }
        }]
    };
    return option;
}

Controller代码：

@RequestMapping(value = "uploadimg", method = RequestMethod.GET)
    public String upload1(HttpServletRequest request, HttpServletResponse response) {
        System.err.println("test");
        return "test";
    }

    @RequestMapping(value = "uploadimg", method = RequestMethod.POST)
    @ResponseBody
    public String upload(@RequestParam("data") String data, HttpServletRequest request, HttpServletResponse response) {
        System.err.println(data);
        PDFUtils.getImgPath(data);
        return "success";
    }

PDFUtils.java

public class PDFUtils {
    public static String getImgPath(String data) {
        // 图片输出路径
        String imgFilePath = null;
        try {
            Base64 base64 = new Base64();
            // base64编码解码
            byte[] k = base64.decode(data.substring("data:image/jpeg;base64,".length()));
            InputStream is = new ByteArrayInputStream(k);
            String fileName = UUID.randomUUID().toString();
            //String pdfFilePath = ShopApplicationResource.shopResource.getString("pdftempfiles.file.root");
            String pdfFilePath = "D://test//echarts//";
            imgFilePath = pdfFilePath + fileName + ".jpg";
            double ratio = 1.0;
            BufferedImage image = ImageIO.read(is);
            // 设置图片是否缩放
            int newWidth = (int) (image.getWidth() * ratio);
            int newHeight = (int) (image.getHeight() * ratio);
            Image newimage = image.getScaledInstance(newWidth, newHeight, Image.SCALE_SMOOTH);
            BufferedImage tag = new BufferedImage(newWidth, newHeight, BufferedImage.TYPE_INT_RGB);
            Graphics g = tag.getGraphics();
            g.drawImage(newimage, 0, 0, null);
            g.dispose();
            // 使用io将图片写入文件中
            ImageIO.write(tag, "jpg", new File(imgFilePath));
        } catch (IOException e) {
            e.printStackTrace();
        }
        return imgFilePath;
    }
}

访问uploadimg首先出现应该显示的图表，4秒后跳转’success’
到D盘test文件夹下的echarts文件夹下查看下载好的图片。
OK

Dr.Zhu

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Echarts3之html2canvas下载图表（后续生成PDF）

Echarts提供了下载图表的功能，但是仅仅满足客户端下载到本地，不经过项目本身的后台，对于高度自定义是不能满足的。首先页面引入html2canvas插件。<script src="//cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>然后引入Echarts。对应自己的echarts.js路径<script src=
复制链接

扫一扫