SAAS-09-图片上传及Jasper

第9章文件上传与PDF报表入门

理解DataURL的基本使用，实现DataURL的文件上传完成基于七牛云的文件上传理解 JasperReport生命周期独立完成 JasperReport的入门案例

如图所示，实现员工照片上传功能

1.2 Data URL

1.2.1 DataURL概述所谓DataURL是指"data"类型的Url格式，是在RFC2397中提出的，目的是对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入。 1.2.2 Data URL入门完整的DataURL语法：DataURL= data:mediatype;base64,。 mediatype：表述传递的数据的MIME类型（text/html，image/png，image/jpg）简单的说，data类型的Url大致有下面几种形式。

1.2.4 优缺点分析 1. 浏览器支持几乎所有的现代浏览器都支持Data URL格式，包括火狐浏览器，谷歌浏览器，Safari浏览器，opera浏览器。 IE8也支持，但有部分限制，IE9完全支持。 2. 数据容量

Base64编码的数据体积是原数据的体积4/3，也就是DataURL形式的图片会比二进制格式的图片体积大1/3。 3. 使用场景 DataURL形式的数据不会占用HTTP会话，所以再访问外部资源或当图片是在服务器端用程序动态生成时借用

DataURL是一个不错的选择

1.3 Data URL实现用户头像上传修改用户实体类，用户数据库表添加用户头像字段使用基于Data URL的方式实现用户上传，实质是将前端上传的文件以Base64进行编码并且保存到数据库中。用户controller中添加用户上传方法用户service中添加上传文件处理的方法在service中需要对文件进行base64编码，并且保存到数据库中

头像回显：

这里面有个问题在使用七牛云存储上传得时候一定要把这个安全认证给关闭了不然会出现如下错误

加上三行代码

   //构造一个带指定 Region 对象的配置类，指定存储区域，和存储空间选择的区域一致Configuration cfg = new Configuration(Region.huanan());
//...其他参数参考类注释cfg.useHttpsDomains = false;manager = new UploadManager(cfg);Auth auth = Auth.create(accessKey, secretKey);//构造覆盖上传token

图片回显成功

3 PDF报表打印概述

3.1 概述在企业级应用开发中，报表生成、报表打印下载是其重要的一个环节。在之前的课程中我们已经学习了报表中比较重要的一种：Excel报表。其实除了Excel报表之外，PDF报表也有广泛的应用场景，必须用户详细资料，用户简历等。接下来的课程，我们就来共同学习PDF报表

3.2 常见PDF报表的制作方式目前世面上比较流行的制作PDF报表的工具如下：

1. iText PDF：iText是著名的开放项目，是用于生成PDF文档的一个java类库。通过iText不仅可以生成PDF或rtf 的文档，而且可以将XML、Html文件转化为PDF文件。 2. Openoffice：openoffice是开源软件且能在windows和linux平台下运行，可以灵活的将word或者Excel转化为PDF文档。

3. Jasper Report：是一个强大、灵活的报表生成工具，能够展示丰富的页面内容，并将之转换成PDF

JasperReport是一个强大、灵活的报表生成工具，能够展示丰富的页面内容，并将之转换成PDF，HTML，或者 XML格式。该库完全由Java写成，可以用于在各种Java应用程序，包括J2EE，Web应用程序中生成动态内容。只需要将JasperReport引入工程中即可完成PDF报表的编译、显示、输出等工作。在开源的JAVA报表工具中，JASPER Report发展是比较好的，比一些商业的报表引擎做得还好，如支持了十字交叉报表、统计报表、图形报表，支持多种报表格式的输出，如PDF、RTF、XML、CSV、XHTML、TEXT、 DOCX以及OpenOffice。数据源支持更多，常用 JDBC SQL查询、XML文件、CSV文件、HQL（Hibernate查询），HBase，JAVA集合等。还允许你义自己的数据源，通过JASPER文件及数据源，JASPER就能生成最终用户想要的文档格式。

4 JasperReport的开发步骤 4.1 JasperReport生命周期通常我们提到PDF报表的时候,浮现在脑海中的是最终的PDF文档文件。在JasperReports中，这只是报表生命周期的最后阶段。通过JasperReports生成PDF报表一共要经过三个阶段，我们称之为 JasperReport的生命周期，这三个阶段为：设计（Design）阶段、执行（Execution）阶段以及输出（Export）阶段，如下图所示：

4.2 JasperReport原理简述

1. JRXML:报表填充模板，本质是一个XML. JasperReport已经封装了一个dtd，只要按照规定的格式写这个xml文件，那么jasperReport就可以将其解析最终生成报表，但是jasperReport所解析的不是我们常见的.xml文件，而是.jrxml文件，其实跟xml是一样的，只是后缀不一样。

2. Jasper:由JRXML模板编译生成的二进制文件，用于代码填充数据。解析完成后JasperReport就开始编译.jrxml文件，将其编译成.jasper文件，因为JasperReport只可以对.jasper文件进行填充数据和转换，这步操作就跟我们java中将java文件编译成class文件是一样的

3. Jrprint:当用数据填充完Jasper后生成的文件，用于输出报表。这一步才是JasperReport的核心所在，它会根据你在xml里面写好的查询语句来查询指定是数据库，也可以控制在后台编写查询语句，参数，数据库。在报表填充完后，会再生成一个.jrprint格式的文件（读取jasper文件进行填充，然后生成一个jrprint文件）

4. Exporter:决定要输出的报表为何种格式，报表输出的管理类。 5. Jasperreport可以输出多种格式的报表文件，常见的有Html,PDF,xls等

4.3 开发流程概述制作报表模板模板编译构造数据

5 模板工具Jaspersoft Studio 5.1 概述 Jaspersoft Studio是JasperReports库和JasperReports服务器的基于Eclipse的报告设计器; 它可以作为Eclipse插件或作为独立的应用程序使用。Jaspersoft Studio允许您创建包含图表，图像，子报表，交叉表等的复杂布局。您可以通过JDBC，TableModels，JavaBeans，XML，Hibernate，大数据（如Hive），CSV，XML / A以及自定义来源等各种来源访问数据，然后将报告发布为PDF，RTF， XML，XLS，CSV，HTML，XHTML，文本，DOCX或 OpenOffice。 Jaspersoft Studio 是一个可视化的报表设计工具,使用该软件可以方便地对报表进行可视化的设计，设计结果为格式.jrxml 的 XML 文件，并且可以把.jrxml 文件编译成.jasper 格式文件方便 JasperReport 报表引擎解析、显示。

5.4 基本使用 5.4.1 模板制作（1）打开Jaspersoft Studio ，新建一个project, 步骤： File -> New -> Project-> JasperReports Project

搭建SpringBoot工程进行项目的PDF输出，代码结构非常简单，直接调用API就可以进输出，整个流程还是比较简单的

  @GetMapping("/testJasper")public void createPdf(HttpServletRequest request, HttpServletResponse response) throws IOException {//1.引入jasper文件Resource resource = new ClassPathResource("templates/test1.jasper");FileInputStream fis = new FileInputStream(resource.getFile());//2.创建JasperPrint,向jasper文件中填充数据ServletOutputStream os = response.getOutputStream();try {/*** fis: jasper 文件输入流* new HashMap ：向模板中输入的参数* JasperDataSource：数据源（和数据库数据源不同）*              填充模板的数据来源（connection，javaBean，Map）*               填充空数据来源：JREmptyDataSource*/JasperPrint print = JasperFillManager.fillReport(fis, new HashMap<>(),new JREmptyDataSource());//3.将JasperPrint已PDF的形式输出JasperExportManager.exportReportToPdfStream(print,os);} catch (JRException e) {e.printStackTrace();}finally {os.flush();}

第10章用户档案PDF报表理解数据填充的两种方式熟练构造分组报表熟练构造Chart图形报表实现个人档案的PDF输出 1 数据填充我们介绍了如何使用JasperReport来生成简单的文本报表，正式企业开发中动态数据展示也是报表中

最重要的一环，接下来我们共同研究的就是填充动态数据到PDF报表中。

预览数据的填充效果

测试成功

  @GetMapping("/testJasper")public void createPdf(HttpServletRequest request, HttpServletResponse response) throws IOException {//1.引入jasper文件Resource resource = new ClassPathResource("templates/testpram.jasper");FileInputStream fis = new FileInputStream(resource.getFile());//2.创建JasperPrint,向jasper文件中填充数据ServletOutputStream os = response.getOutputStream();try {/*** fis: jasper 文件输入流* new HashMap ：向模板中输入的参数* JasperDataSource：数据源（和数据库数据源不同）*              填充模板的数据来源（connection，javaBean，Map）*               填充空数据来源：JREmptyDataSource*/Map hashMap = new HashMap<>();hashMap.put("department","信息部门");hashMap.put("company","黑马");hashMap.put("username","张三");hashMap.put("mobile","12346798");JasperPrint print = JasperFillManager.fillReport(fis, hashMap,new JREmptyDataSource());//3.将JasperPrint已PDF的形式输出JasperExportManager.exportReportToPdfStream(print,os);} catch (JRException e) {e.printStackTrace();}finally {os.flush();}

使用数据库配置连接成功

进行SQL 配置

数据查询成功

界面优化

按条件查询

进行数据源的测试

采用JAVABEN的形视进行数据填充。

  @GetMapping("/testJasper")public void createPdf(HttpServletRequest request, HttpServletResponse response) throws Exception {//1.引入jasper文件Resource resource = new ClassPathResource("templates/testBean.jasper");FileInputStream fis = new FileInputStream(resource.getFile());//2.创建JasperPrint,向jasper文件中填充数据ServletOutputStream os = response.getOutputStream();try {Map parameters = new HashMap<>();//构建javaBean的数据源//1.获取到对象的list集合List<User> userList = getUserList();//2.通过list集合创建javaBean的数据源对象JRBeanCollectionDataSource ds = new JRBeanCollectionDataSource(userList);JasperPrint print = JasperFillManager.fillReport(fis,parameters,ds);JasperExportManager.exportReportToPdfStream(print,os);} catch (JRException e) {e.printStackTrace();}finally {os.flush();}}

创建图形报表数据，进行代码测试

@GetMapping("/testJasper6")public void createPdf(HttpServletRequest request, HttpServletResponse response) throws Exception {//1.引入jasper文件Resource resource = new ClassPathResource("templates/echarts.jasper");FileInputStream fis = new FileInputStream(resource.getFile());//2.创建JasperPrint,向jasper文件中填充数据ServletOutputStream os = response.getOutputStream();try {Map parameters = new HashMap<>();//构建javaBean的数据源//1.获取到对象的list集合List<UserCount> userList = getUserCountList();//2.通过list集合创建javaBean的数据源对象JRBeanCollectionDataSource ds = new JRBeanCollectionDataSource(userList);JasperPrint print = JasperFillManager.fillReport(fis,parameters,ds);JasperExportManager.exportReportToPdfStream(print,os);} catch (JRException e) {e.printStackTrace();}finally {os.flush();}}

父子报表

  @GetMapping("/testJasper7")public void createPdf(HttpServletRequest request, HttpServletResponse response) throws Exception {//1.引入jasper文件Resource resource = new ClassPathResource("templates/main.jasper");FileInputStream fis = new FileInputStream(resource.getFile());//2.创建JasperPrint,向jasper文件中填充数据ServletOutputStream os = response.getOutputStream();try {Map parameters = new HashMap<>();//参数  子报表的路径   子报表需要的数据Resource subResout = new ClassPathResource("templates/echarts.jasper");parameters.put("sublist",getUserCountList());//子报表需要的数据parameters.put("subpath",subResout.getFile().getPath());// 子报表的路径JasperPrint print = JasperFillManager.fillReport(fis,parameters,new JREmptyDataSource());JasperExportManager.exportReportToPdfStream(print,os);} catch (JRException e) {e.printStackTrace();}finally {os.flush();}}

导出个人信息档案的PDF恩典

进行页面的信息加载，需要在前端加入代码

SAAS-09-图片上传及Jasper相关推荐

LocalResizeIMG前端HTML5本地压缩图片上传，兼容移动设备IOS,android
LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...
Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
html input type=file 文件上传; 图片上传; 图片闪烁
(1)input file 对话框和获取选中文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
.NET自定义多文件(图片)上传的实现方式
目的:通过输入要显示传图片的数量,自动创建相对应数量的上传控件,进行一次性上传操作. 默认有一个上传控件,当输入2时并点击添加按钮后,下面又显示了2个控件,效果如下: 点击全部上传按钮后的效果: CS ...
kindeditor编辑器和图片上传独立分开的配置细节
关于kindeditor编辑器上传按钮的异步加载最关键的部署问题,它的上传图片的组件都已经封装得很好了的,只需要监听到页面按钮的点击事件给编辑器对象传递一些对应的初始化参数即可显示图片上传的弹窗实现异 ...
django 类取消csrf_Django之Form组件详解、图片上传及定制
Django的Form功能生成HTML标签验证用户数据(显示错误信息) HTML Form提交保留上次提交数据初始化页面显示内容 Django form 流程 1.创建类,继承form.Form ...
TinyMCE 新增本地图片上传功能
TinyMCE 新增本地图片上传功能在TinyMCE 在处理富文本时,可以通过网站的相对路径录入图片地址.这样TinyMCE 就可以正常显示图片了.其实该功能属于普通HTML富文本控件基本功能了.现 ...
六种PHP图片上传重命名方案研究与总结
一.适用场景无法使用从数据库中返回的自增长数字,给上传图片重命名. 这是图片或文件上传的流程决定的.一般图片上传处理过程是,先上传图片到服务器,重命名之后,插入到数据库. 也就是说,在数据库中非常容 ...
Asp.Net Core Web Api图片上传(一)集成MongoDB存储实例教程
Asp.Net Core Web Api图片上传(一)集成MongoDB存储实例教程原文:Asp.Net Core Web Api图片上传(一)集成MongoDB存储实例教程 Asp.Net Cor ...
html5 dzzxjbd cn,UEditor实现单张图片上传至腾讯云（对象存储服务）功能（html5
UEditor文件上传默认只支持后端语音,因为项目是前后端分离开发,所以需要前端自行实现图片上传. 这里是直接修改的 ueditor/ueditor.all.js文件 ueditor.all.js中找 ...

SAAS-09-图片上传及Jasper

SAAS-09-图片上传及Jasper相关推荐

最新文章

热门文章