Echart生成的报表导出为PDF

Echart官网定制js,选择需要的模块生成echart-min.js

1.前端

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <input type="button" id="download" value="下载">
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            animation: false,
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        
        option2 = {
                animation: false,
                title : {
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:335, name:'直接访问'},
                            {value:310, name:'邮件营销'},
                            {value:234, name:'联盟广告'},
                            {value:135, name:'视频广告'},
                            {value:1548, name:'搜索引擎'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
        
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        // 获取base64图片
        var picBase64Info = myChart.getDataURL();
 
        //创建form提交图片数据
        var postDownLoadFile = function (options) {
            var config = $.extend(true, { method: 'post' }, options);
            var $iframe = $('<iframe id="down-file-iframe" />');
            var $form = $('<form target="down-file-iframe" method="' + config.method + '" />');
            $form.attr('action', config.url);
            //图片
            $form.append('<input type="hidden" name="base64Info" value="' + config.data + '" />');
            
            $iframe.append($form);
            $(document.body).append($iframe);
            $form[0].submit();
            $iframe.remove();
        }
        //触发下载功能
        $("#download").on('click',
            function() {
              var param={};
              postDownLoadFile({
                url:"${BASE_PATH}/admin/dataanalyze/exportPDF",
                data:picBase64Info,
                method:'post'
              });
          });
    </script>
</body>
</html>

2.后端

/**
     * 
     * @throws DocumentException 
     * @throws Exception 
     * @Description 导出PDF
     * @category
     * @author 张银彪  
     * @date 2019年6月27日 上午9:26:38
     */
    public void exportPDF() throws DocumentException, Exception {

        Document document = new Document(PageSize.A4, 50, 50, 50, 50); // 创建文档
        // 大小

        try {
            String path = getSession().getServletContext().getRealPath(Preference.DOWN_DIR); // 基础路径
            
            PdfWriter writer = PdfWriter.getInstance(document, new FileOutputStream(path + "/" + System.currentTimeMillis()+".pdf")); // 保存路径
            Rectangle rect = new Rectangle(36, 54, 559, 788);
            rect.setBorderColor(BaseColor.BLACK);
            writer.setBoxSize("art", rect);
            HeaderFooter header1 = new HeaderFooter(); // 设置页脚
            writer.setPageEvent(header1);

            Font font = PdfTool.setChineseFont(); // 正文字体

            File fpath = new File(PathKit.getWebRootPath() + Preference.PDF_FONT_PATH);
            BaseFont bfChinese = BaseFont.createFont(fpath.getPath(), BaseFont.IDENTITY_H, BaseFont.EMBEDDED);
            Font font2 = new Font(bfChinese, 8, Font.NORMAL); // 数据表字体
            Font fontRed = new Font(bfChinese, 8, Font.NORMAL, new BaseColor(255, 0, 0)); // 数据表示异常字体（红色）

            document.open();// 打开文档

            // 基本信息
                PdfPTable header = new PdfPTable(4);
                header.setSpacingBefore(5);
                header.setSpacingAfter(5);

                PdfPCell baseinfoheader = new PdfPCell(); // 设置抬头
                Paragraph paragraph = new Paragraph("数据图表", font);
                paragraph.setAlignment(1);
                paragraph.setSpacingBefore(25);
                baseinfoheader.setColspan(4);
                baseinfoheader.setBackgroundColor(new BaseColor(185, 185, 185));
                baseinfoheader.setUseAscender(true);
                baseinfoheader.setVerticalAlignment(Element.ALIGN_MIDDLE);
                baseinfoheader.addElement(paragraph);
                header.addCell(baseinfoheader);

                // 插入一行--展示通道名称
                PdfPCell insert_h1 = new PdfPCell(new Phrase("图表", font));
                //header.addCell(insert_h1);
                String imgUrl = getRequest().getParameter("base64Info");
                String[] imgUrlArr = imgUrl.split("base64,");//拆分base64编码后部分
                      
        //     byte[] buffer = new BASE64Decoder().decodeBuffer(imgUrlArr[1]);
                String string = imgUrlArr[1];
                byte[] buffer=   Base64.getDecoder().decode(string);
                PdfPCell insert_h2 = new PdfPCell(Image.getInstance(buffer));
                insert_h2.setColspan(4);
                header.addCell(insert_h2);
                PdfPTable mheader = new PdfPTable(4);
                mheader.setSpacingBefore(5);
                mheader.setSpacingAfter(5);

                PdfPTable mytable = new PdfPTable(1); // 插入图片
    
                document.add(header); // 文件头部
                document.add(mytable); // 历史记录列表头部
                document.newPage(); // 前面通道结束后 另起一页显示新通道
        } catch (Exception e) {
            e.printStackTrace();
        }
        document.close();
    }

3.后面补充SpringBoot的代码

Echart生成的报表导出为PDF

猜你喜欢