页面内容含有表格、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 = prof