Java生成PDF文件，添加图片和表格内容，以及浏览器端下载

最新推荐文章于 2025-07-13 22:07:06 发布

原创

最新推荐文章于 2025-07-13 22:07:06 发布 · 3.8k 阅读

8 ·

CC 4.0 BY-SA版权

本文介绍如何使用Java生成包含Echarts图表和表格内容的PDF文件。首先，通过前端获取64位编码的Echarts图，后台解析并转换为图片，接着将表格数据拼接成字符串传至后台，进行PDF制作并添加内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面内容含有表格、echarts图；生成PDF文件报表

思路：先把页面的echarts图的64位获取，后台进行解析echarts图，生成图片，然后在添加到PDF文件中；

表格内容获取，可以根据标签获取标签内容，进行字符串拼接，然后把所有字符串数据传到后台进行逻辑处理，再进行PDF制作，内容添加

上面是一个思路，下面我们进行代码实现

这是页面代码，我只是简单的布局一下，思路是这样的：把页面所有的数据都拼接成有规律的字符串，传递到后台逻辑方法里面进行处理，

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="modo" uri="/WEB-INF/custom-tld/urltag.tld" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>pdf报表图文生成</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <%@ include file="../system/allresources.jsp" %>
    <link rel="stylesheet" href="${ctp}/static/scripts/util/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctp}/static/scripts/util/layui/css/modules/laydate             /default/laydate.css" media="all">
    <script src="${ctp}/static/scripts/util/layui/lay/modules/laydate.js" type="text/javascript"></script>
</head>

<body >

<%--生成pdf文件的按钮--%>
<div onclick="makePDF_rank()"> 生成pdf报表
</div>
<%--用于获取echarts图的base64编码--%>
<form id="chartForm" style="display:none">
    <input id="imageValue" name="base64Info" type="text" maxlength="500000"/>
    <input id="imageValue01" name="base64Info1" type="text" maxlength="50000"/>
    <input id="imageValue02" name="base64Info2" type="text" maxlength="50000"/>
    <input id="imageValue03" name="base64Info3" type="text" maxlength="50000"/>
    <input id="imageValue04" name="base64Info4" type="text" maxlength="50000"/>
    <input id="imageValue05" name="base64Info5" type="text" maxlength="50000"/>
    <input id="imageValue06" name="base64Info6" type="text" maxlength="50000"/>

    <input id="ds1" name="TBDS1" type="text" maxlength="50000"/>
    <input id="ds2" name="TBDS2" type="text" maxlength="50000"/>
    <input id="dataes" name="dataes" type="text" maxlength="50000"/>
    <input id="tableData" name="tableData" type="text" maxlength="50000"/>

</form>






<div style="height:auto;width:100vw;padding-bottom:5vh;">
    <div class="content">
    

        <div >
            <table class="layui-table">
                <colgroup>
                    <col width="18%">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th rowspan="2">项目</th>
                    <th colspan="3">营业收入总额</th>
                    <th colspan="3">纳税总额</th>
                </tr>
                <tr>
                    <th class="th1"></th>
                    <th>上年同期</th>
                    <th>同比（%）</th>
                    <th class="th1"></th>
                    <th>上年同期</th>
                    <th>同比（%）</th>
                </tr>


 
                 <tr>
                    <td>data1</td>
                    <td>data2</td>
                    <td>data3</td>
                    <td >data4</td>
                    <td>data5</td>
                    <td>data6</td>
                </tr>
                </thead>
                <tbody style="color:#000">
               <tr>
                    <td>data1</td>
                    <td>data2</td>
                    <td>data3</td>
                    <td >data4</td>
                    <td>data5</td>
                    <td>data6</td>
                </tr>
             
                </tbody>
            </table>
            <table class="layui-table">
                <colgroup>
                    <col width="18%">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th rowspan="2">项目</th>
                    <th colspan="3">营业收入总额</th>
                    <th colspan="3">纳税总额</th>
                </tr>
                <tr>
                    <th class="th1"></th>
                    <th>上年同期</th>
                    <th>同比（%）</th>
                    <th class="th1"></th>
                    <th>上年同期</th>
                    <th>同比（%）</th>
                </tr>


 
                 <tr>
                    <td>data1</td>
                    <td>data2</td>
                    <td>data3</td>
                    <td >data4</td>
                    <td>data5</td>
                    <td>data6</td>
                </tr>
                </thead>
                <tbody style="color:#000">
               <tr>
                    <td>data1</td>
                    <td>data2</td>
                    <td>data3</td>
                    <td >data4</td>
                    <td>data5</td>
                    <td>data6</td>
                </tr>
             
                </tbody>
            </table>

            <div style="width:42vw;height:30vh;display:inline-block" id="incomeDiv">

            </div>
            <div style="width:42vw;height:30vh;display:inline-block;" id="dutyDiv">

            </div>
            <div style="width:28vw;height:30vh;display:inline-block;" id="assetsDiv">

            </div>
            <div style="width:28vw;height:30vh;display:inline-block;" id="profitDiv">

            </div>
            <div style="width:28vw;height:30vh;display:inline-block;" id="debtDiv">

            </div>

        


     
        </div>


  


</body>

<script>

   
  
    function report() {

   

   

    var incomeDiv_2 = echarts.init(document.getElementById("incomeDiv_2"));
    var dutyDiv_2 = echarts.init(document.getElementById("dutyDiv_2"));
    var assetsDiv_2 = echarts.init(document.getElementById("assetsDiv_2"));
    var profitDiv_2 = echarts.init(document.getElementById("profitDiv_2"));
    var debtDiv_2 = echarts.init(document.getElementById("debtDiv_2"));
   
             
        

    }

   

        chart.setOption(option);
    }

    
    var incomeDiv;
    var dutyDiv;
    var assetsDiv;
    var profitDiv;
    var debtDiv;
   

    //调用生成PDF的方法，把本页面的echarts 图的64位码传输过去，并生成图片添加到PDF文件中
    function makePDF_rank() {
        //查询年度
        var StartDate = $("#StartDate").val();


        var chartExportUrl = '${ctp }/rankController/makePdfFile_rank';
        //饼图
        var bingPic1 = incomeDiv.getDataURL();//获取echarts图的base64编码，为png格式。
        var bingPic2 = dutyDiv.getDataURL();//获取echarts图的base64编码，为png格式。
        var bingPic3 = assetsDiv.getDataURL();//获取echarts图的base64编码，为png格式。
        var bingPic4 = profitDiv.getDataURL();//获取echarts图的base64编码，为png格式。
        var bingPic5 = debtDiv.getDataURL();//获取echarts图的base64编码，为png格式。


        //柱形图
        var picBase64Info1 = incomeDiv_2.getDataURL();//获取echarts图的base64编码，为png格式。

        var picBase64Info2 = dutyDiv_2.getDataURL();//获取echarts图的base64编码，为png格式。
        var picBase64Info3 = assetsDiv_2.getDataURL();//获取echarts图的base64编码，为png格式。
        var picBase64Info4 = profitDiv_2.getDataURL();//获取echarts图的base64编码，为png格式。
        var picBase64Info5 = debtDiv_2.getDataURL();//获取echarts图的base64编码，为png格式。
        var picBase64Info6 = incomeDiv_3.getDataURL();//获取echarts图的base64编码，为png格式。
        var picBase64Info7