目介绍

一款免费的低代码可视化报表，像搭建积木一样在线拖拽设计！低代码开发必备，功能涵盖，数据报表、打印设计、图表报表、大屏设计等！ 秉承“简单、易用、专业”的产品理念，极大的降低报表开发难度、缩短开发周期、节省成本、解决各类报表难题，完全免费的！

当前版本：v1.5.4 | 2022-10-25

集成依赖

<dependency>
  <groupId>org.jeecgframework.jimureport</groupId>
  <artifactId>jimureport-spring-boot-starter</artifactId>
  <version>1.5.4</version>
</dependency>

• mongodb/redis支持包（按需添加）

<dependency>
  <groupId>org.jeecgframework.jimureport</groupId>
  <artifactId>jimureport-nosql-starter</artifactId>
  <version>1.5.4</version>
</dependency>

#升级日志

重点升级了打印支持固定表头表尾、自动换行打印、Api配置打印次数、漏洞修复、多租户权限集成，解决了分组、分组排序及其他问题。

重点功能

• html打印支持固定表头表尾
• html打印支持Api配置记录打印次数
• 自动换行html打印空白多优化
• 多租户权限集成
• 修复字典查询问题
• 安全漏洞修复
• 优化分组、分组排序问题

Issues处理

• 交叉报表一级表头与二级表头对应关系出错issues/1096
• 图片为带参数的url格式，html打印时无法正常加载issues/1155
• 分组排序问题issues/1254
• 分组小计多了一行issues/1242
• 负值转百分数显示错误issues/1183
• 交叉报表动态属性数据错乱issues/I5GXXA
• 1.5.0版本单元格插入img标签触发xssissues/I5EF8S
• MongDB数据源导excel只能导出100条数据issues/I5J74D
• 单元格下拉复制会出现undefined值issues/I59EUZ
• 数据格式百分比负数问题issues/I5O2P5
• 统计函数DBSUM失效issues/I5JQ6H
• 数据库为0的字段，excell导出显示0E-18issues/I5G5CP
• 导出pdf时候，图表左侧出现空白issues/I5LCOK
• 图表绑定SQL数据集，运行报错issues/1171
• MongDB数据源导出excel只有100条数据issues/1182
• 导出数据查询条件取值错误issues/1182
• 导出Excel与报表页查询条件不一致issues/1286
• 百分号格式的数据导出excel之后会变成小数issues/1146
• 下拉树组件接口地址不支持变量issues/1210
• 使用dbsum统计，当统计的字段过多时预览出错issues/1293
• 超链接报表钻取原始参数自定义表达式传参不是期望值issues/1203
• 多个列进行DBSUM的情况下，出现报错信息issues/1314

#代码下载

• https://github.com/zhangdaiscott/JimuReport
• https://gitee.com/jeecg/JimuReport

#技术文档

• 体验官网： http://jimureport.com
• 技术文档： http://report.jeecg.com

为什么选择 JimuReport?

永久免费，支持各种复杂报表，并且傻瓜式在线设计，非常的智能，低代码时代，这个是你的首选！

• 采用SpringBoot的脚手架项目，都可以快速集成
• Web 版设计器，类似于excel操作风格，通过拖拽完成报表设计
• 通过SQL、API等方式，将数据源与模板绑定。同时支持表达式，自动计算合计等功能，使计算工作量降低
• 开发效率很高，傻瓜式在线报表设计，一分钟设计一个报表，又简单又强大
• 支持 ECharts，目前支持28种图表，在线拖拽设计，支持SQL和API两种数据源
• 支持分组、交叉，合计、表达式等复杂报表
• 支持打印设计（支持套打、背景打印等）可设置打印边距、方向、页眉页脚等参数 一键快速打印 同时可实现套打，不动产证等精准、无缝打印
• 大屏设计器支持几十种图表样式，可自由拼接、组合，设计炫酷大屏
• 可设计各种类型的单据、大屏，如出入库单、销售单、财务报表、合同、监控大屏、旅游数据大屏等

#系统截图

• 报表设计器（专业一流 数据可视化,解决各类报表难题）

• 报表设计器（完全在线设计，简单易用）

• 打印设计（支持套打、背景打印）

• 数据报表（支持分组、交叉，合计等复杂报表）

• 图形报表（目前支持28种图表）

• 数据报表斑马线

#功能清单

本文简介

• 面试大厂,HTML/CSS,JS,网络基础这三块硬知识是必不可少的
• 我整理了一些备考笔记，分享给大家
• 初中级前端到高级前端的蜕变，从基础知识开始~

2 块元素和行元素

2.1 请说出3个H5新增的块元素，并介绍他们的应用场景

• aside:表示article元素内容之外，与article元素内容相关的辅助信息
• figure:代表一个块级图像，包含说明。figure添加标题时，与figcaption元素结合使用。
• dialog:表示几个人直接的对话。与dt和dd元素结合使用，dt表示讲话者，dd表示讲话内容。

2.2 行内元素和块元素的区别

• HTML元素分为行内、块状、行内块元素三种。
• 块元素和行内块元素可以设置宽高
• 行内元素不可以，高度由内容撑开
• 三者是可以通过display属性任意转换的 block 块状元素 inline-block行内块元素 inline 行内元素

2.3 块级元素特征

• 可以设置宽高
• 设置margin、padding的上下左右都有效
• 元素独占一行
• 多个块状元素一起写，默认排列从上至下

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年我花了一个月整理了一份最适合2020年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

2.4 行内块元素特征

• 能设置宽高
• 不会自动换行
• 多个行内块一起写，默认从左至右排列

2.5 行内元素特征

• 设置宽高无效
• 设置margin的上下无效，左右有效，设置padding上下左右都有效（并且会撑大空间）
• 不会自动换行

3 CSS

3.1 请说出3个CSS浏览器前缀

1. -ms- 兼容IE浏览器
2. -moz- 兼容firefox
3. -o- 兼容opera
4. -webkit- 兼容chrome和safari

使用demo

div {  -ms-transform: rotate(0);  -webkit-transform: rotate(0);  -moz-transform: rotate(0);  -o-transform: rotate(0);  transform: rotate(0);}

CSS前缀自动补全：autoprefixer

3.2 盒模型

1. 盒模型分为标准盒模型和怪异盒模型(IE5.X和6)两种
2. 标准盒模型 width=content
3. 怪异盒模型 width=content + padding + border

已知: margin:20px; border:10px; padding:10px; width:200px; height:50px;


标准盒模型:1\. 占用宽:margin*2+padding*2+border*2+width=20*2+10*2+10*2+200=2802\. 占用高:margin*2+padding*2+border*2+height=20*2+10*2+10*2+50=1303\. 盒子实际宽度:padding*2+border*2+width=10*2+10*2+200=2404\. 盒子实际高度padding*2+border*2+height=10*2+10*2+50=90


怪异盒模型:1\. 占用宽:margin*2+width=20*2+200=2402\. 占用高:margin*2+height=20*2+50=903\. 盒子实际宽度:width=2004\. 盒子实际高度height=50

IE8及更早版本不兼容问题解决方案：在HTML页面声明

3.3 box-sizing都有哪些值？他们的宽高分别如何计算？

1. content-box(标准盒模型)|border-box(怪异盒模型)|inherit(继承父元素)
2. content-box的宽高由content决定
3. border-box的宽高由content+padding+border决定

4. BFC

4.1 什么是边界塌陷（或边界重叠）？

1. 兄弟div（上下margin塌陷）
2. 父子div（如果父级div没有padding\border\inlinecontent, 子级div的margin会向上查找边界塌陷的div，直到找到某个标签包括border\padding\inline content的其中一个，然后按此div进行margin）

4.2 什么是BFC（格式化上下文）？如何实现？

BFC（块状格式化上下文，独立的盒子，布局不受外部影响，但是如果同一个BFC中，同级块状元素的margin-top和margin-bottom会重叠）

只要元素满足下面的任一条件，都会触发BFC特征。

1. body根元素
2. position: fixed|absolute(绝对定位元素)
3. float(浮动元素) 除了none
4. overflow: hidden|auto|scroll (除了visible之外的值)
5. display: inline-block\ table-cells\flex （具有table-的属性）

解决问题:

1. 解决边界塌陷问题
2. 解决浮动元素导致父元素高度塌陷问题
3. 解决阻止元素被浮动元素覆盖问题

4.3 多个inline元素之间会有空隙，为什么？如何解决？

元素被当成行内元素排版时，元素直接的空白符会被浏览器处理，根据white-spack的处理方式（默认是normal,合并多余空白），Html代码在回车换行时被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block元素之间就出现了空隙。

复现<ul>  <li>首页</li>  <li>登陆</li>  <li>资源</li>  <li>社区</li>  <li>帮助</li></ul>


解决办法：

1. 多个inline元素写在同一行
2. 将父级元素的font-size:0
3. 给inline元素添加float的样式
4. 设置子元素的margin为负值
5. 设置父元素display:table和word-spacing:-1em

5 浮动

5.1 浮动会出现什么问题？

• 浮动会导致父元素高度塌陷
• 会覆盖其他元素

5.2 如何清除浮动？

• 父元素加上overflow:hidden
• 在浮动元素的后面（同级），添加一个div，属性是clear:both
• 在父元素添加一个伪元素 .clearfix:after { display: block; height: 0; visibility: hidden; clear: both; content: '';} .clearfix{ //IE6模式下 zoom:1;}
• 在父元素添加双伪元素 .clearfix:before,.clearfix:after { display: table; content: '';}.clearfix:after { clear: both;}.clearfix { zoom: 1; //兼容IE6下}

6 position都有哪些值？

• relative 相对定位 （相对元素在文档中的初始位置定位）
• absolute绝对定位（相对于定位元素定位，最顶级是body）
• fixed 固定定位 （相对窗口定位）
• static 文档流


7 CSS的选择器

7.1 CSS的选择器有哪些？

• id 选择器
• class 选择器
• tag 选择器
• 属性 选择器（a[href=""] ）
• 派生 选择器

7.2 优先级高低如何判断？

• 不同级优先级： ！important>内联>id>class=属性=伪类 >标签=伪元素 > 通配符（*）
• 同一级别： 后来居上 （后写覆盖先写） 内联样式 > 内部样式表 > 外部样式表 > 导入样式 @import 

优先级相同时会发生什么? 样式被覆盖

7.3 列举几条常用的CSS reset

• *{ margin:0; padding:0;}
• ol, ul { list-style:none;}
• body {line-height:1;}

7.4 是否了解normalize？

normalize.css是一个css reset的替代方案。

• 保护有用的浏览器默认样式而不是完全去掉
• 一般化样式：为大部分html元素提供
• 修复浏览器自身的bug
• 优化css可用性
• 解释代码

7.5 如何做到一个list中奇数和偶数行的背景色不一样？

 ul>li:nth-child(2n+1) {    background-color: red; }ul>li:nth-child(2n) {    background-color: yellow;}

7.6 如何做到一个list的第一行没有上边框？

 ul>li:first-child {      border-top: none;  }

有梦想的人，眼睛会发光。

希望屏幕前的你，能够关注我一波。接下来，我会分享前端各种干货，以及编程中的趣事。

本标签: 32

1. <html></html>,创建一个HTML文档;
2. <head></head>,设置文档标题和其它在网页中不显示的信息;
3. <title></title>,设置文档的标题;
4. <h1></h1>,最大的标题;
5. <pre></pre>,预先格式化文本;
6. <u></u>,下划线
7. <b></b>,黑体字;
8. <i></i>,斜体字;
9. <tt></tt>,打字机风格的字体;
10. <cite></cite>,引用,通常是斜体;
11. <em></em>,强调文本(通常是斜体加黑体);
12. <strong></strong>,加重文本(通常是斜体加黑体);
13. <font,size="",color=""></font>,设置字体大小从1到7,颜色使用名字或RGB的十六进制值;
14. <BASEFONT></BASEFONT>,基准字体标记;
15. <big></big>,字体加大;
16. <SMALL></SMALL>,字体缩小;
17. <STRIKE></STRIKE>,加删除线;
18. <CODE></CODE>,程式码;
19. <KBD></KBD>,键盘字;
20. <SAMP></SAMP>,范例;
21. <VAR></VAR>,变量;
22. <BLOCKQUOTE></BLOCKQUOTE>,向右缩排;
23. <DFN></DFN>,述语定义;
24. <ADDRESS></ADDRESS>,地址标记;
25. <sup></SUP>,上标字;
26. <SUB></SUB>,下标字;
27. <xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
28. <plaintext>...</plaintext>固定宽度字体(不执行标记符号);
29. <listing>...</listing>,固定宽度小字体;
30. <font,color=00ff00>...</font>字体颜色;
31. <font,size=1>...</font>最小字体;
32. <font,style,='font-size:100,px'>...</font>无限增大.

格式标签: 16

1. <p></p>,创建一个段落;
2. <p,align="">,将段落按左、中、右对齐;
3. <br>,换行,插入一个回车换行符;
4. <blockquote></blockquote>,从两边缩进文本;
5. <dl></dl>,列表标签,定义列表;
6. <dt>,定义列表标题;
7. <dd>,定义列表内容;

例:

<dl>

<dt>标题1</dt>

<dd>内容11</dd>

<dd>内容12</dd>

<dt>标题2</dt>

<dd>内容21</dd>

<dd>内容22</dd>

</dl>

1. <ol></ol>,列表标签,定义一个标有数字的列表;
2. <ul></ul>,列表标签,定义一个标有圆点的列表;
3. <li>,放在每个列表项之前; 放在<ol></ol>之间则每个列表项加上一个数字,放在<ul></ul>之间则每个列表项加上一个圆点;
4. <div,align=""></div>,分区标签,用来排版大块HTML段落,也用于格式化表;
5. <MENU>,选项清单;
6. <DIR>,目录清单;
7. <nobr></nobr>,强行不换行;
8. <hr,size='9',width='80%',color='ff0000'>水平线(设定宽度);
9. <center></center>,水平居中.

链接标签: 7

1. <a,href="URL"></a>,创建超文本链接;
2. <a,href="mailtEMAIL">
3. </a>,创建自动发送电子邮件的链接;
4. <a,name="name"></a>,创建位于文档内部的书签;
5. <a,href="#name"></a>,创建指向位于文档内部书签的链接;
6. <BASE>,文档中不能被该站点辨识的其它所有链接源的URL;
7. <LINK>,定义一个链接和源之间的相互关系;

链接标签注解:

target="...",决定链接源在什么地方显示(用户自定义的名字,_blank,_parent,_self,_top);

rel="...",发送链接的类型;

rev="...",保存链接的类型;

accesskey="...",指定该元素的热键;

shape="...",允许我们使用已定义的形状定义客户端的图形镜像(default,rect,circle,poly);

coord="...",使用像素或者长度百分比来定义形状的尺寸;

tabindex="...",使用定义过的tabindex元素设置在各个元素之间的焦点获取顺序(使用tab键使元素获得焦点).

表格标签: 21

1. <table></table>,创建一个表格;
2. <tr></tr>,表格中的每一行;
3. <td></td>,表格中一行中的每一个格子;
4. <th></th>,设置表格头:通常是黑体居中文字;
5. <table,cellspacing="">,设置表格格子之间空间的大小;
6. <table,border="">,设置边框的宽度;
7. <table,cellpadding="">,设置表格格子边框与其内部内容之间空间的大小;
8. <table,width="">,设置表格的宽度.用绝对像素值或总宽度的百分比;
9. <table,align="">,设置表格格子的水平对齐方式(left,center,right,justify);
10. <tr,align="">,设置表格格子的水平对齐方式(left,center,right,justify);
11. <tr,valign="">,设置表格格子的垂直对齐方式(baseline,bottom,middle,top);
12. <td,colspan="">,设置一个表格格子跨占的列数(缺省值为1);
13. <td,rowspan="">,设置一个表格格子跨占的行数(缺省值为1);
14. <td,nowrap>,禁止表格格子内的内容自动断行;
15. <CAPTION></CAPTION>,表格的标题;
16. <COLGROUP></COLGROUP>,定义多个列为一组列;
17. <TABLE></TABLE>,创建一个表格;
18. <THEAD></THEAD>,定义表格的页眉;
19. <COL>,定义一个列组中的列，以便对它们能够同时设置有关属性;
20. <TBODY></TBODY>,定义一个表格的实体;
21. <TFOOT></TFOOT>,定义一个表格的页脚;

表单标签: 18

1. <form></form>,创建表单;

action="...",接收数据的服务器的URL;

method="...",HTTP的方法(get,,post),其中get是被反对使用的;

enctype="...",指定MIME(Internet媒体类型);

onsubmit="...",当提交表单时发生的内部事件;

noreset="...",在重新设置表单时发生的内部事件;

target="...",决定把内容显示在什么地方(_blank,_parent,_self,_top)

1. <select,multiple,name="name",size=""></select>,创建滚动菜单,size设置在需要滚动前可以看到的表单项数目;
2. <option>,设置每个表单项的内容;
3. <select,name="name"></select>,创建下拉菜单;
4. <textarea,name="name",cols=40,rows=8></textarea>,创建一个文本框区域,列的数目设置宽度,行的数目设置高度;
5. <input,type="checkbox",name="name">,创建一个复选框,文字在标签后面;
6. <input,type="radio",name="name",value="">,创建一个单选框,文字在标志后面;
7. <input,type=text,name="foo",size=20>,创建一个单行文本输入区域,size设置以字符串的宽度;
8. <input,type="submit",value="name">,创建提交(submit)按钮;
9. <input,type="image",border=0,name="name",src="name.gif">,创建一个使用图象的提交(submit)按钮;
10. <input,type="reset">,创建重置(reset)按钮;
11. <BUTTON></BUTTON>,创建一个按钮;

disabled="...",把按钮的状态设置为不能;

name="...",按钮的控制名,value="...",按钮的值;

type="...",按钮的类型(button,,submit,,reset);

1. <FIELDSET></FIELDSET>,把相互关联的控件组合成一组;
2. <ISINDEX>,提示用户输入;
3. <LABEL></LABEL>,为一个控件提供标签;
4. <LEGEND></LEGEND>,为FIELDSET元素指定一标题;
5. <SELECT></SELECT>,为用户做选择创建各个选项;
6. <TEXTAREA></TEXTAREA>,创建一个允许用户多行输入的区域.

表单标签注解:

type="...",用于输入控件的类型(text,password,checkbox,radio,submit,reset,file,hidden,image,button);

name="...",控件的控制名(要求是除了submit和reset之外的任何名字);

value="...",控件的初始值;

checked="...",把一个单选钮设置为选中的状态;

disabled="...",把控件的状态设置为不能使用;

readonly="...",只对输入密码的文本框使用;

size="...",表示以像素为单位的除了文本框和密码框控件之外的其它控件的宽度,它是用来指定字符的数目;

src="...",一个图像控件的URL;

maxlength="...",指定可以输入的最多的字符数目;

alt="...",另外一种文本描述;

usemap="...",到客户端图形镜像的URL;

align="...",被反对.控制对齐方式(left,,center,,right,,justify);

tabindex="...",通过定义的tabindex值确定在不同元素之间获得焦点的顺序;

onfocus="...",当元素获得焦点时发生的事件;

onblur="...",当元素失去焦点时发生的事件;

onselect="...",当元素被选中时发生的事件;

onchang="...",当元素状态被改变时发生的事件;

accept="...",允许上载的文件类型.

帧标签(框架标签): 27

1. <frameset></frameset>,放在一个帧文档的<body>标签之前,也可以嵌在其他帧文档中;
2. <frameset,rows="value,value">,定义一个帧内的行数,可用像素值或高度百分比;
3. <frameset,cols="value,value">,定义一个帧内的列数,可用像素值或宽度百分比;
4. <frame>,定义一个帧内的单一窗或窗区域;
5. <noframes></noframes>,定义在不支持帧的浏览器中显示什么提示;
6. <frame,src="URL">,规定帧内显示的HTML文档;
7. <frame,name="name">,命名帧或区域以便别的帧可以指向它;
8. <frame,marginwidth="">,定义帧左右边缘的空白大小,必须大于等于1;
9. <frame,marginheight="">,定义帧上下边缘的空白大小,必须大于等于1;
10. <frame,scrolling="">,设置帧是否有滚动栏,其值可以是"yes","no",或"auto";
11. <frame,noresize>,禁止用户调整一个帧的大小;
12. <IFRAME></IFRAME>,创建一个内联的帧;

scr="...",定义在帧中显示的内容的来源;

frameborder="...",定义帧之间的边界(0或1);

align="...",被反对,控制对齐方式(left,,center,,right,,justify);

height="...",帧的高度,width="..."帧的宽度;

1. <marquee>...</marquee>,普通卷动;
2. <marquee,behavior=slide>...</marquee>,滑动;
3. <marquee,behavior=scroll>...</marquee>,预设卷动;
4. <marquee,behavior=alternate>...</marquee>,来回卷动;
5. <marquee,direction=down>...</marquee>,向下卷动;
6. <marquee,direction=up>...</marquee>,向上卷动;
7. <marquee,direction=right></marquee>,向右卷动;
8. <marquee,direction='left'></marquee>,向左卷动;
9. <marquee,loop=2>...</marquee>,卷动次数;
10. <marquee,width=180>...</marquee>,设定宽度;
11. <marquee,height=30>...</marquee>,设定高度;
12. <marquee,bgcolor=FF0000>...</marquee>,设定背景颜色;
13. <marquee,scrollamount=30>...</marquee>,设定卷动距离;
14. <marquee,scrolldelay=300>...</marquee>,设定卷动时间;
15. <img,src="">,插入图片,参数有:width="宽",alt="说明文字",height="高",boder="边框".

文档整体属性标签: 10

1. <body,bgcolor="">,设置背景颜色.使用名字或RGB的十六进制值;
2. <body,background="">,设置背景图片;
3. <body,bgsound="">,设置背景音乐;
4. <body,bgproperties="fixed">,固定背景图片(IE适用);
5. <body,text="">,设置文本颜色.使用名字或RGB的十六进制值;
6. <body,link="">,设置链接颜色.使用名,字或RGB的十六进制值;
7. <body,vlink="">,设置已使用的链接的颜色.使用名字或RGB的十六进制值;
8. <body,alink="">,设置正在被击中的链接的颜色.使用名字或RGB的十六进制值;
9. <body,topmargin="">,设置页面的上边距;
10. <body,leftmargin="">,设置页面的左边距.