1.html上的Table跟Chart的导出(后台使用ssm框架)

最新推荐文章于 2024-09-19 08:38:13 发布
最新推荐文章于 2024-09-19 08:38:13 发布
阅读量348 收藏
点赞数
文章标签： git javascript 前端 ViewUI
原文链接：https://my.oschina.net/u/1391605/blog/631752
版权

最近在工作中遇到的一个问题,要将html标签里的Table跟echarts生成报表导出到excel里面,没有搞过各种谷歌!-_-,还好解决了,就分享一下这次踩坑的经验了.

所使用的jar包:

commons-codec-1.9.jar
commons-lang3-3.3.2.jar
jsoup-1.8.3.jar
poi-3.9.jar
slf4j-api-1.7.7.jar
slf4j-simple-1.7.7.jar
table-to-xls-0.0.1-RELEASE.jar//这个可以在oscchina的git上找到的谢谢大神的代码了


首先说一说实现的思路:

  1. 前端用jquery获取Table标签的内容跟echarts报表的图片的base64----->2.ajax的post传输数据到后台----->3将获取到的数据分别处理,表格生成excel再将base64还原成图片插入到生成的excel里面

具体实现:

第一步:

        首先说明一下echarts在生成图表之前都要先初始化一个东西所以base64可以根据这个来获取

var showCharts=[];//这是个全局变量用来接收每个chart对象的

//在每个chart初始化的时候将初始化的对象放进数组
var myChart = echarts.init(document.getElementById(tagid));
showCharts.push(myChart);

第二步:通过页面上的一个按钮触发一个函数(click事件)

function export2Excel(tableId){
   var tableContext =$("#"+tableId).html();
   var datas={}
   if(tableContext.length>37){//这里为什么判断长度大于37因为表格动态生成的默认长度就有36!!:)
     tableContext="<table>"+tableContext+"</table>";
     datas.tableContext=tableContext;
   }
	  	
   if(showCharts.length!=0){
	 var imgUrls = [];
	 for(var x  =0; x<showCharts.length;x++){
	   imgUrls.push(showCharts[x].getDataURL("png"));
	 }
	datas.imgUrls=imgUrls;
    }
	  	
   if(datas.tableContext){
	 $.ajax({
	    url:url,//发送到后台处理这些数据的控制器地址(这个只是负责发送数据到后台)
	    type: "POST",
	    dataType: "json",
	    data: $.param(datas,true),//发送数组这样的数据格式必用这个东西不然很可能出问题
	    success: function (result) {
	      if(parseInt(result.status)==0){
		 location.href=url+fileName//用来处理下载请求的控制器地址跟下载的文件名,为啥要有这一步呢因为ajax不支持下载的浏览器是弹不出那个保存文件的框的(有没有草泥马)
	      }
	    },
	    failure: function (err) {
		 alert("ajax产生了错误!");
	     }
	   });
	 }else{
	    alert("必须有表格或者图表才能下载");
	  }

第三步:后台处理

//这个控制器是用来预处理ajax的post请求提交过来的数据的
@RequestMapping(value = "preExportToExcel",method=RequestMethod.POST)
@ResponseBody
public  AjaxData<Map<String,String>> preExportToExcel(String tableContext, String[] imgUrls,HttpServletRequest req,HttpServletResponse rep) throws Exception {
      AjaxData<Map<String,String>> ajax = new AjaxData<Map<String,String>>();
      tableContext=HtmlUtils.htmlUnescape(tableContext);
      String filePath=req.getSession().getServletContext().getRealPath("/")+"temp";
      filePath = filePath.replace("\\","/")+"/";
      HtmlTableToExcel html = new HtmlTableToExcel(imgUrls, filePath, tableContext);//这个对象会将传递过来的数据生成excel
      String xlsFileName = html.mergePicAndExcel();
      Map<String,String> map = new HashMap<String,String>();
      map.put("xlsFileName", xlsFileName);
      ajax.setData(map);
      return ajax;
}

//这个控制器才是真正的下载控制器对应ajax里面的location.href那句代码
//采用servlet这种方式下载的原因就是可以在下载完成的时候可以将文件删掉
@RequestMapping(value = "exportToExcel",method=RequestMethod.GET)
@ResponseBody
public void exportToExcel(String xlsFileName, HttpServletResponse rep) throws Exception {
		OutputStream out = null;
		try {
			rep.reset();
			rep.setContentType("application/vnd.ms-excel");
			rep.setHeader("Content-Disposition","attachment; filename=" + xlsFileName.substring(xlsFileName.lastIndexOf("/") + 1));
			out = rep.getOutputStream();
			System.out.println(xlsFileName);
			out.write(FileUtils.readFileToByteArray(new File(xlsFileName)));
			out.flush();
			File file = new File(xlsFileName.substring(0,xlsFileName.lastIndexOf("/")));
			File[] files= file.listFiles();
			for (File file2 : files) {
				FileUtils.deleteFile(file2.getAbsolutePath());
			}
		} catch (IOException e) {
			throw new RuntimeException(e.getMessage() + "文件下载失败");
		} finally {
			if (out != null) {
				try {
					out.close();
				} catch (IOException e) {
					throw new RuntimeException(e.getMessage() + "文件下载失败");
				}
			}
		}
	}

所用类的代码:

值得注意的是图片的后缀名必须是.png结尾的额不然透明背景的图片插入到excel里面是要变成黑乎乎的

/**
 * 将图片的base64码解密并还原图片(只支持支持格式"png","jpg",支持多张图片)
 *
 */
public class Base64ToImage {
 /**
  * Logger for this class
  */
 private static final Logger logger = Logger.getLogger(Base64ToImage.class);
 
 /**
  * 枚举类用来选择模式
  *
  */
 public static enum PictureType {
 //png的图片类型
 TYPE_PNG,TYPE_JPG;
 }
 
 /**
  * 
  * @param imgUrls  多张图片的base64码组
  * @param filePath 保存文件的路径
  * @param type     生成文件的模式
  * @return         返回生成的图片的名字
  */
 public static List<String> base64ToPicture(String[] imgUrls,String filePath,Base64ToImage.PictureType type){
 String suffix="";
 
 //判断传入的图片类型
 if(type==PictureType.TYPE_PNG) suffix=suffix+".png";
 if(type==PictureType.TYPE_JPG) suffix=suffix+".jpg";
 
 //判断空值以及0值
 if(imgUrls.length==0||imgUrls==null||StringUtils.isBlank(filePath)){
 return null;
 }
 
 List<String> fileNameList= new ArrayList<String>();
 for (String imgUrl : imgUrls) {
 String fileName = UUID.randomUUID().toString();
 String realFileName=filePath+fileName;
 if(isCreatePic(imgUrl, realFileName,suffix)) fileNameList.add(fileName+suffix);
 logger.info(fileName);
 }
 return fileNameList;
 }
 /**
  * 
  * @param imgsURl 图片的base64码
  * @param fileName 图片名称
  * @return 是否生成图片成功
  */
 private static boolean isCreatePic(String imgsURl, String fileName,String suffix){
 BASE64Decoder decoder = new BASE64Decoder();
 boolean flag = true;
 OutputStream out=null;
 try {
 String[] url = imgsURl.split(",");
 String u = url[1];
 // Base64解码
 byte[] buffer = new BASE64Decoder().decodeBuffer(u);
 // 生成图片
 out= new FileOutputStream(new File(fileName + suffix));
 out.write(buffer);
 out.flush();
 } catch (Exception e) {
 flag = false;
 }finally{
 try {
 if(out!=null)out.close();
 } catch (IOException e) {
 flag=false;
 }
 }
 return flag;
 }
}
  

 // 将页面上的html 表格导出(支持页面上的报表图片导出,只支持单表的导出,只支持png格式图片插入)
public class HtmlTableToExcel {
 private static final Logger logger = Logger.getLogger(HtmlTableToExcel.class);
 
 //图片的base64码
 private String[] imgUrls;
 
 //存放生成文件的路径
 private String filePath;
 
 //生成的文件名字
// private String fileName=UUID.randomUUID().toString();
 
 private String tableContext;

 public HtmlTableToExcel(String[] imgUrls,String filePath, String tableContext) {
 this.imgUrls = imgUrls;
 this.tableContext = tableContext;
 this.filePath=filePath;
 }
 
 public String createExcel(){
 FileOutputStream fout=null;
 try {
 String xlsFileName =this.filePath+UUID.randomUUID().toString()+".xls";
 fout = new FileOutputStream(xlsFileName);
 TableToXls.process(tableContext, fout);
 return xlsFileName;
 } catch (FileNotFoundException e) {
 e.printStackTrace();
 }finally{
 try {
 if(fout!=null)fout.close();
 } catch (IOException e) {
 e.printStackTrace();
 }
 }
 return null;
 }
 
 public String mergePicAndExcel(){
 String xlsFileName=createExcel();
 if(imgUrls!=null){
 List<String>fileNames = Base64ToImage.base64ToPicture(this.imgUrls, this.filePath, PictureType.TYPE_PNG);
 for(int x = 0;x < fileNames.size();x++){
 drawPiceToExcel(xlsFileName, this.filePath+fileNames.get(x),x);
 }
 }
 return xlsFileName;
 }
 
 private void drawPiceToExcel(String xlsFileName,String picFileName,int position){
 FileOutputStream fileOut = null;
 BufferedImage bufferImg = null;
 FileInputStream in = null;
 Workbook wb = null;
 try {

 // 先把读进来的图片放到一个ByteArrayOutputStream中，以便产生ByteArray
 ByteArrayOutputStream byteArrayOut = new ByteArrayOutputStream();
 bufferImg = ImageIO.read(new File(picFileName));
 ImageIO.write(bufferImg, "png", byteArrayOut);

 // 打开一个工作薄
 in = new FileInputStream(xlsFileName);
 POIFSFileSystem fs = new POIFSFileSystem(in);
 wb = new HSSFWorkbook(fs);
 HSSFSheet sheet = (HSSFSheet) wb.getSheetAt(0);
 HSSFPatriarch patriarch = sheet.createDrawingPatriarch();
 HSSFClientAnchor anchor = new HSSFClientAnchor(0, 0, 1023, 100, (short) 0, sheet.getLastRowNum()+5*position+27*position,
 (short) (sheet.getRow(0).getPhysicalNumberOfCells()+8), sheet.getLastRowNum()+5*position+27*(position+1));
 // 插入图片
patriarch.createPicture(anchor,wb.addPicture(byteArrayOut.toByteArray(),HSSFWorkbook.PICTURE_TYPE_JPEG));

 fileOut = new FileOutputStream(xlsFileName);
 // 写入excel文件
 wb.write(fileOut);
 fileOut.close();

 } catch (IOException io) {
 throw new RuntimeException(io.getMessage()+"读取文件出问题");
 } finally {
 if (fileOut != null) {
 try {
 fileOut.close();
 } catch (IOException e) {
 e.printStackTrace();
 }
 }
 }
 }
}


转载于:https://my.oschina.net/u/1391605/blog/631752

chunyan3312
关注
基于Eclipse根据Maven整合Spring + SpringMVC + MyBatis（SSM）框架（附带源码）
u013526643的专栏
07-01 806
文章目录一、整合环境准备1、环境注明2、创建数据库和表结构语句3、配置Maven环境如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 一、整合环境准备 1、环境注明 Eclipse、Maven 3.5.0、MySQL 8.0.15、JDK 1.8、Tomcat 8、Spri
SSM_Vue实现疫情期间高校人员管理系统
xiaocao1223的博客
06-29 317
1.技术介绍 SpingMVC+Spring+Mybatis+mysql+Vue 开发工具：eclipse或IDEA 2.主要功能说明： 1)学生 个人中心、地区管理、疫情资讯管理、学生管理（学生居家管理、学生打卡管理、学生返校申请管理、学生请假申请管理）、学生留言管理 2）老师 个人中心、地区管理、老师管理（老师居家管理、老师打卡管理、老师返校申请管理）、疫情资讯管理、学生管理（学生信息管理、学生居家管理、学生打卡管理、学生返校申请管理、学生请假申请管理）、学生留言管理 3）管理员 个人中心、地区类型管理
highchart图标和table切换
zengshaotao的专栏
04-17 696
原文地址：http://www.stepday.com/topic/?915 用图表呈现数据有些时候也不是那么直观，总希望能够可以切换至表格的形式呈现数据。表格体现数据还是一目了然的。所以我们可以增加一个功能，让highcharts图表和table表格之间可以相互切换呈现数据。这里我提供了一个比较单一的切换功能，后期可以自行变换方式，比如：通过工具箱内按钮进行切换也或者右键菜单内进行切换 一...
第四章 HTML网页的数据抽取
skxc_的博客
11-23 1709
通过Kettle工具抽取HTML网页的数据，并保存至数据库extract中的数据表html中。
HTML在表格中添加echarts图表
weixin_34232617的博客
07-23 1256
在HTML的table中，只要将需要插入echarts图表的格子设定为明确的宽高（不能为百分比），并赋予一个id，就可以插入echarts图表。 如示例所示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl...
javaWeb课程设计（使用SSM框架）
weixin_44862345的博客
07-29 5488
javaWeb课程设计（使用SSM框架）程序简介新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 程序简介 这是本人的第一个博客，也是我自己的课程设计，是基于java Web技术的一个简单网站。本人曾经在学校某学生组织干过学
使用IDEA搭建ssm框架的详细图文教程
weixin_45438625的博客
10-11 6309
使用idea搭建ssm框架项目开始搭建ssm项目所需工具第一步第二步第三步第四步第五步第六步第七步第八步第九步如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 开始搭建ssm项目 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这
SSM框架综合应用
gengermao的博客
06-07 7475
SSM框架综合应用环境搭建准备jar包（共26个）准备前端页面的css与js文件查询功能添加功能功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 环境搭建 SSM框架的环境搭建过程有如下几个步骤： 准备jar包（共26个） jar包
layui与后端分页
weixin_42983531的博客
11-24 3166
使用layui与后端分页要点前台jscontroller层service 实现类如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 刚开始找怎么传值找了半天，才发现...
Go 相关的框架，库和软件的精选清单
开发之路
07-03 4906
概述 这是一个Go 相关的框架，库和软件的精选清单，引用自 awesome-go项目，并翻译补充而来这是一个Go 相关的框架，库和软件的精选清单，引用自 awesome-go项目，并翻译补充而来 音频和音乐 用于处理音频的库。 EasyMIDI -EasyMidi是一个简单可靠的库，用于处理标准Midi文件（SMF）。 flac支持FLAC流的Native Go FLAC编码器/...
SAP错误处理总结
hfdgjjg的博客
01-20 2557
SAP错误处理总结
post请求导出表单。
weixin_34000916的博客
03-29 337
postExcelFile(params, url) { //params是post请求需要的参数，url是请求url地址 var form = document.createElement("form"); //创建form表单节点 form.style.display = 'none'; form.action = url; form.method = "post"...
html页面使用echarts,在HTML页面中使用Echarts图表
weixin_29234239的博客
06-03 3599
今天在写一个项目时给项目做了数据统计，因为需要将统计到的数据以可视化的方法将数据展示出来，便需要用一些统计图(图表)的方式将他展现出来。我使用的图表插件是Echarts，Echarts是一款专业的图表插件，配置方便，所以图表是否合心意便不会在于插件上，只要自己的数据足够全面，就可以创建出优秀的图表。配置步骤导入js包导入js包的方法有很多，可以直接前往官网下载js包，也可以直接通过cdn导入，因为...
R语言面积图 area chart
santiagozhang的博客
03-01 7611
简介 面积图展现了数值型变量随着另外一个变量变化的趋势。一般都是变量随时间的变化。面积图其实就是折线图，只是在线和X轴之间填满了颜色。面积图一般分为两种： 重叠面积图，显示各个数值随时间或类别变化的趋势。每一个数值分别显示。有的时候数值会被隐藏起来。 堆积面积图，各个数值堆积在一起显示总量。主要是part-to-whole的概念。不单单可以看出总量，而且可以看出每一个数值的对比和对总量的贡献。 ...
服务器管理：基本的服务器维护指南（启动、停止、重启）
最新发布
Echo_Wish的博客
09-19 228
通过本文的介绍，您已经了解了服务器的基本维护操作，包括启动、停止和重启。无论是通过命令行工具、图形化管理工具，还是自动化脚本，这些操作都是确保服务器稳定运行的关键。希望这篇文章能帮助您更好地掌握服务器管理的基本技能。
SSM框架原理、作用及使用方法详解
SSM框架原理、作用及使用方法 SSM框架是springMVC、spring和mybatis框架的整合，是标准的MVC模式，将整个系统划分为表现层、controller层、service层、DAO层四层。使用springMVC负责请求的转发和视图管理，spring...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值