Jasperreport_6.18的吐血记录二之目录页

承接上篇

第一篇已经介绍了基本的安装方法和一些基本的配置，可能暂时还用不到，毕竟还没有做最后的导出，可能还不能看到效果，只能算是环境准备吧！
说一下编写思路，我的想法是分段编写，本章主要讲创建目录的案例，后面我们会说一些柱形图、饼图以及交叉表的案例，本来想着直接写个整体的，但是一时间觉得内容太多就分开来编写。这样的一些相关问题我们也会分段展开好说些。
对于目录页，我们应该不陌生，分为封面，主体内容以及尾页，并且对于导出的pdf或者word，还带着目录指引，点击分级菜单可以进行跳转到对应的页码。

目录如图：（放个图看看）

聊聊数据填充的问题

我们都知道很多模板型的报告都是先制作模板，然后进行数据填充，jasperreport也不例外，同样是先制作模板，后填充数据，但是这里个人建议：考虑到你的整个模板数据很多，分成很多层级目录，少到几页大到几十页，上百页，所以模板做一部分然后进行数据填充测试，保证这部分模板正确之后再进行下一部分的模板制作和填充。
关于数据填充，我自己使用了HashMap-> (key, value) 映射的方式进行数据填充，至于key，value的类型，key是String字符串类型，代表着你要进行注入到模板中的变量名称，对于变量名称就需要和你的模板中对应的变量名称一致，value的类型比较开放，可以是字符串、整形、或者是JRBeanCollectionDataSource（模板自带封好的一个类型，很多柱形图和饼图都需要它的包装）等等，其它的细节我们编写边说明！！！

创建目录模板

我们先创建一个可用的jasperreport project，因为我们最后只需要最终的模板，project只是给我们放模板的文件夹，最后我们把模板提取出来，不会再软件中做其他操作，这里不多说了，案例我想用学生系列的案例做演示和讲解。

1. 创建student项目

项目名称—student_project
new -> project -> jasperreport project -> student_project
用于存放模板的目录—demo_cover

创建不想说太多，比较容易的东西！

2. 创建初始化目录模板

选中demo_cover右击创建jasper Report，选择Report Books中的Wave Books,命名为student.jrxml
new -> Jasper Report -> Report Books -> Wave Books

新建的模板可以看到有四个文件：student.jrxml(核心文件)主模板，student_cover.jrxml(封面)，student_backcover.jrxml(尾页)，student_toc.jrxml(目录页)。
jasperreport有个可以在线预览的功能：

点一下可以预览当前主模板

可以看到预览有三个页面，封面、目录和首页，也可以选择预览方式，默认是java，下拉可以选择各种预览方式，例如pdf、word、excel等等。

3. 中文不显示解决办法

这里说一下中文的问题：
双击目录页进去

改一下目录的名称，不使用默认的，双击目录名称点进去修改，记得保留原本的字符串左右双引号（**保留切记），使用中文字体，我这里使用黑体，测试一下pdf预览:

发现中文显示不出，这是因为我软件中并没有配置黑体字体，仅配置了宋体和微软雅黑。
选择一个试试：


发现可以正常显示，因为我软件中配置了黑体和微软雅黑，所以导出的pdf也可以正常显示中文，
** 这里需要配置宋体和微软雅黑字体
上一篇中已经放了软件的下载地址，在字体压缩包中找到两个字体包

一个是宋体，一个是雅黑，可以解压出来放在一个固定位置，我这里将两个字体放到了桌面用于测试，配置到jasperreport的软件中进行测试。
配置步骤：点击jasperreport中的windows，找到reference配置搜索font，点进去可以看到配置页面，点击add，新增一个外部的字体，具体配置如下：

宋体配置完了，微软雅黑同理即可，其他字体也是如此，然后在进行pdf预览操作试试呢？你会发现神奇的一幕！需要配置的原因是由于软件本身并不能识别这些个中文字体，对中文不太友好，所以我们需要从外部导入字体，也在情理之中。所以我们在后续的项目中也要进行字体的配置，这一点一定要关注！！！

4. 聊一聊封面

封面我相信大家都不陌生，比如默认展示的是一个图片和几个标题，大家可以根据自己的需求进行图片背景更换，更多时候可能需要在封面的指定位置动态填写内容，比如日期等等，还要有的封面会存在覆盖整个页面，这时候你需要调整背景图的位置，使其覆盖整个模板页，与模板的四周重合，切记重合重合重合！！！这样你看到的封面会由整个背景图覆盖。
java图示预览：


然后你会发现你的背景图完全的覆盖了你的页面，所以背景图的边角拉伸和收缩，位置摆放需要小伙伴们细心！另外我们可以看到，文字和背景图是一个在上一个在下，他们之间是存在层级关系，背景图在下，静态文字在下，可以设置背景图在下，点击背景图右击选择Order -> Send to back，意思就是将背景图放到当前层级之下。

4.1 封面和文本的坑

上面说到了封面背景和静态文本的重叠层级问题，可以根据自己的需求放置图片，设置文本值。这里我们选择的是java预览的方式一切都很正常，此时切换pdf预览方式，你会发现也是一切正常，再试试word预览呢？


我们发现word方式预览的时候，背景图片消失了，没错它消失了。不知道大家发现没有，模板打开它的主体有很多网格线，这其实是jasperreport的一种样式，导出word的原因在于首先它会画出网格填充内容，当我们的字体和图片出现在一个网格内的时候，这时候它就出现了难题，一个网格不能同时保存字体和背景，只能舍弃其中一个，当然也不全是 这种出现的前提条件是你的背景和你的字体存在了重叠的部分，假如我们收缩背景，不让背景和文字重叠，这种情况并不会出现，这里注意删除默认模板最底下的日期，它也在背景图片上，保持背景图片的“无污染”！！！
图示最开始的模板（去掉了背景图右下角的日期）：


看看word预览！！！

你会发现背景图出来了，所以这算是第一个坑，官方也没有解决办法，也是因为word导出本身的原因，打印网格的方式出现问题，合乎情理！！！本人也试图解决这个难题，看了很多方法也没有解决这种层级覆盖的问题。

4.2 提供封面和动态文本的解决思路

虽然官方没提供，网上也没有发现有人解决过，但这能难倒我们程序员吗？当然是不能的，我选择一个算是投机取巧的方式，这里只说思路，后面会具体贴出代码！
思路：既然动态文本和图片不能重叠，所以我想到了一个办法，就是在图片上动手脚，将我们的静态图片变成动态图片，将动态字体写入到静态图片，并且生成新的图片，用新的图片去作为封面，这里就需要背景图片是动态的地址，模板是可以允许的，jasperreport提供了可以放置动态图片路径的方式，这个我们后面会介绍用法，通过这种方式，文字和背景图合二为一，很顺利地解决了这个问题，只不过我们需要调整动态文本在图片上面的位置，这个需要慢慢调试，最后得到完整的图片，思路到此，后面提供详细的办法~~!!!

5. 聊一聊目录

5.1 初谈

新建的wave book提供了toc.jrxml模板，主要就是提供目录的层次结构，双击创建好的toc.jrxml打开目录模板，结合图示去说吧！

这里给大家标好了顺序1-8：
1 代表目录的标题（可以自己定义）;
2 代表目录的一级标题；
3 代表紧跟一级标题的页码，例如清华------1，北大---------2这样；
4 代表一级标题下的二级标题前面的序号，例如清华下面可能有很多院系，比如1化学，2理工，3艺术，4计算机等等，生成的目录会自动为二级标题前面加上顺序号，很方便，当然你也可以不要，4是可以删除的，你在5的位置自己写标题，自定义序号也是可以的；
6 代表二级标题的页码，下面78同理不做介绍了…
这里需要注意的是，自动生成的目录页样式基本保持一致即可，千万不要试图去改变它的排版或者改变它的一些变量值，否则之后生成的word报告你可能就没有目录了，当然也别害怕，可以尝试修改一些样式，如果真的word导出没有出来样式，你还是可以新建一个模板将你的原生目录粘贴到现有的目录覆盖掉现有的配置还是可以还原的。
大家可能好奇为啥这个是目录页，其实我们点开这些标注的部分，可以双击打开，它本身其实是一个个变量，很多标题的是内置变量。
标题：动态变量
一二三级别标题：动态标题，和之后的正文内容有关系，正文内容决定了你的目录
页码值：默认动态变量 — $V{PAGE_NUMBER} + $F{pageIndex} + 1
二级标题序号：默认动态变量— $V{level2Index} + “.”
很多变量我没有去解释意思，因为是内置的，这个阶段不想解释太多，后面用到会讲解！
还有一个比较关键的是中文字体，我们这里也要选中目录的几个文本框，然后进行字体选择—微软雅黑，字号调的小一点保证你的变量能显示出来（我截图的部分目前显示出来了），因为微软雅黑字体默认字号蛮大的，我们很容易溢出整个文本框，所以这里的字号我调成了10号，方便后续测试，防止后面目录显示不出来！！！

5.2 目录编写准备

我们自定义一个目录：
目录标题：高等院校
一级标题：清华，北大，浙大；
二级标题：计算机科学与技术系，软件工程系，物联网管理系
这三个大学作为国内顶尖大学，拿来作为案例，大家看着会更有感觉，每个大学都存在这三个院系，所以我们最后的效果可能就是这样的，
页码值只是个示范，具体最后出来还是看动态的值！

5.3 创建新的模板

我们之前所创建的模板包含了封面，尾页以及目录，那么我们现在需要生成5.2中的目录，我们就需要新的模板进行编写，并将新的模板注入（我这里使用这个词）到我们已存在的模板中去，然后在新的模板中编写我们所需要的内容，并体现我们所需要的层级展示！
新建模板: 右击demo_cover -> new -> jasper report -> 选择一个Blank A4即可 表示空模板，我们自己填充内容 -> 命名随便我这里叫demo1


此时创建的新模板demo1并没有注入到我们student主模板中，我们可以直接拖动demo1.jrxml到我们模板的content中！！！记住，直接拖动就可以！！！双击打开主模板student.jrxml, 如图：

看到主模板中的content了吧，现在是空白的，选中demo1.jrxml直接拖到空白处！~！！！

步骤写好了，最后弹出了这样一个页面，我们选择那个 Use an empty Data Source，然后点击finish即可

这时候你发现你的demo1.jrxml已经注入进来了，ctrl+s记得保存一下你的student模板！！！ctrl+s记得保存一下你的student模板！！！
ctrl+s记得保存一下你的student模板！！！不保存，一会没了！！！
此时，双击demo1.jrxml进入到我们新的模板中：

这里新的模板有很多区域，了解的伙伴应该很熟悉了，title—标题，pageHeader—页眉，column Header—列头，detail1—主体内容，column Header—列尾，page Footer—页脚， Summary—整个模板结束最后的总结
我们这里不需要太多，因为是演示，所以我们直接删除多余区域，右击该区域delete即可，只保留detail1

看到detail1其实就会想到是不是会有detail2，detail3…答案是有的，我们可以创建多个主体内容，选中detail1直接右击选择add Detail Band就可以新增一个主体区域，我们案例中需要三个，所以我们新建两个即可，另外蓝色箭头的小横线可以拖拽，放大我们的区域，看着有点小，不方便我们编写内容，拖动完差不就可以保存了ctrl+s，记得保存！！！记得保存！！！记得保存！！！记得保存！！！

5.4 编写案例内容

5.3我们已经把需要的准备工作做完了，很多简单的部分我直接跳过了，还是强调一遍，看我写的内容前提你是对jasperreport的基础元素是熟悉的，因为简单的报告元素组成百度很多，我不想再去梳理一遍，有点浪费时间，只想去做一个完整的案例给小伙伴参考，编写文字不易，上班之余还要抽空编写文档，边写边思考下一步做啥，写的不好的地方，还请见谅！
第一步：我们分别在detail1，detail2，detail3上面加上文字，这里我选择的元素是Text Field — 动态变量，直接拖动到模板中来，暂时不考虑其位置，保证你的detail空间能写完一二级目录即可，然后双击变量修改文字内容，分别是清华，北大和浙大，照此方法，加入计算机科学与技术系，软件工程系，物联网管理系三个内容，每个detail都加，别忘记**保存保存保存！！！！**详情看图例：




第二步：设置字体，因为我们之前已经注入过宋体和微软雅黑的字体了，所以我们这里直接选中所有的文字，设置成微软雅黑，你可以一个一个设置，也可以直接ctrl+a全局选中设置，并且设置字号，看着字大一点，有点看不清了！！！我这里都设置成了14号字体。此时我们可以对demo1.jrxml进行预览一下看看，如图2，你会发现有部分文字没有显示全，那是因为动态文本框的空间不够我们实际字体放的，实际字体长度溢出了，可以设置文本框属性，养成好习惯，以后建一个文本框就直接设置属性，选中所有动态文本框—设置如图3，图4，意思是我们文本框在溢出的时候会自动纵向拉伸，如图5，文字换行显示了，表示很神奇！！！
注意点：这里的设置溢出自动拉伸只对动态文本才会起作用，静态文本的话，只需要将你的静态文本框拉伸到合适的位置就行，毕竟静态文本是写死的长度，也不会存在长度不够的情况，不够就加嘛！！！

5.5 设置标题层级

5.4做完了所有的准备工作之后，我们开始设置文字的标题层级，清华北大和浙大是一级层级，其余都是二级；
细节：选中清华，打开右侧的Hyperlink选项，展开第一个属性框，填写标签等级和标签内容
Anchor Name Expression 标签内容
Bookmark Level 标签等级 填写1
只填写这两个，中间不用选！！！
至于北大、浙大同理！！！！！
至于二级标题同理，level选择时候选择2级即可
注意点：千万不要将标题错乱了，北大选择了清华，清华选择了北大，要细心，决定成败！！！
** 选择完记得保存！！！** ** 选择完记得保存！！！** ** 选择完记得保存！！！**

做完以上的所有事情之后，最后我们打开主模板，开始预览前我们需要做一件事情，重新编译报告，因为报告预览它会使用我们之前生成的jasper文件进行预览，可能预览的效果不符合预期，所以我们先删掉所有之前的.jasper文件，然后重新编译student.jrxml
编译—右击student.jrxml —> Jasperreports —> Compile reports 编译报告 然后在进行预览 preview即可！！！试试pdf预览和word预览呢？？？

java预览

pdf预览

word预览

我的目录也成功出来了！！！
如果你的目录没有成功出来，可能的问题！！！

1. 标题级别设置的有问题 ？
2. 字体是否已经配置好 ？
3. 是否重新进行了模板编辑（先删除jasper结尾的文件，重新对jrxml文件编译）？
4. 重启软件，重新编译试试 ？
5. 有没有对你的目录动手脚 ？

6. 本章小结

我们对目录进行了初步的搭建和最终的展示，希望大家耐心操作，后面的内容还有很多细节的地方，本章中细节的地方也有很多，中间有个坑就是文字太长导致超出了文本框的全部，静态文本直接拉伸到合适的位置，动态需要设置溢出属性；另外就是目录的设置一定要注意，不要错乱了位置，名称和级别设置的到位！如果觉得有帮助，欢迎关注和点赞！
下一章就准备开始编写交叉表和分组交叉表，这个内容搞定了，后面在编写柱形图和饼图也就不难了。所有的文字都是一个按键一个字打出来的，写一篇文章着实不易，想到哪写到哪，边实操边编写，不要嫌弃我的字多，本人话痨，句句真言，如果有发现写的不对的地方，欢迎评论区留言，我也可以自我补充一些写漏的地方！！！