您的位置 首页 > 数码极客

如何通过ajax在html中输出表格中是值

最近需要使用jquery 的ajax实现了excel表格的功能,首选,我想说的是,jquery的ajax只是看起来让你以为是通过ajax下载了一个excel表格,但是,这个只是一个假象,这个只是一个假象,这个只是一个假象。重要的事情说三遍!!!

实际原理是利用ajax返回一个需要下载的excel的文件名而已,在ssm框架的service层,帮我们把需要的excel通过流的方式下载到了某个文件夹下,然后ajax是执行成功后,执行一条

window.loca

该href指向这个刚刚已经下载好的excel表格,然后就会产生一个下载窗口,让开发者乍以为像ajax实现了下载功能一样。

一开始,我就被它误导了,走了好几天的弯路,现在终于理清思路了,好了,废话少说,直接上代码:

我的项目结构如下:

前端主要在myForm.html页面进行操作,其核心代码如下:

本次主要是按照用户选择的时间段,从s123到e123之间的数据,导出到excel表格里面。window.loca起到的作用就是指向该资源,产生下载框。pathFile就是新生成的excel表格的名字,一般以时间日期进行命名,具体见下方service层代码

springmvc层核心拦截功能代码写法如下:

download文件夹下面的是不要被拦截的,另外两个都是放的诸如js,css等静态资源。

web.xml配置文件的核心部分:

我设置的是所有请求都拦截

下面的后端的关键代码:

controller层核心代码:

s123,e123为起始和终止时间,当用户没有选择的时候,这两个为null,req和resp后面请求路径的时候会用到

service层核心代码:

//导出为excel表格 @Override @Transactional(propagation = Pro I) public ResData exportData(String s123, String e123,HttpServletRequest req,HttpServletResponse resp) { Sy("进入meterService层的exportData方法********************************************************************************************"); List<Meter> meterList; try { Para para=new Para(); (s123); (e123); int num=me(para);//查询记录总数 (num); meterList = me(para);//数据源 //使用poi下载文件 HSSFWorkbook workbook = new HSSFWorkbook(); //创建sheet HSSFSheet sheet = workbook.createSheet("燃气表数据"); //创建row信息 HSSFRow row = (0);//第一行 //创建单元格头标,标题行数据 row.createCell(0).setCellValue("序号"); row.createCell(1).setCellValue("应用ID"); row.createCell(2).setCellValue("服务ID"); row.createCell(3).setCellValue("设备ID"); row.createCell(4).setCellValue("网关ID"); row.createCell(5).setCellValue("数据"); row.createCell(5).setCellValue("时间日期"); //获取数据,从第二行开始以此往excel表格里面赋值 if (meterList != null && me()!=0) { for(int i=0;i<me();i++){ row = (i+1);//从第二行开始 Meter e=me(i); row.createCell(0).setCellValue()); row.createCell(1).setCellValue()); row.createCell(2).setCellValue()); row.createCell(3).setCellValue()); row.createCell(4).setCellValue()); row.createCell(5).setCellValue()); row.createCell(6).setCellValue()); } } //将其生成一个excel文件,输出,保证每次生成的文件都不一样,则使用时间日期命名 SimpleDateFormat sFormat=new SimpleDateFormat("yyyy-MM-dd HHmmss"); Calendar calendar=Calendar.getInstance(); String excelName=()); /*以下操作将获取部署的服务端地址,以http的格式显示 projectServerPath=http://localhost:8080/meter/statics/download/ */ //String projectServerPath = req.getScheme() + "://"+req.getServerName()+":" +req.getServerPort() + req.getContextPath() + "/statics/download/"; /* path为/statics/download/在服务端的地址,将输出实际哪个盘下的哪个文件夹 */ String path = req.getSession().getServletContext().getRealPath("/statics/download/"); //String fileURL=projectServerPath+excelName+".xls"; String fileURL=path+"\\"+excelName+".xls"; //fileURL=new String("iso8859-1"),"UTF-8"); // String fileURL1=new Strings(),"ISO8859-1"); //新建一个文件输出流 Sy("fileURL的值:"+fileURL+"***************************************************************"); Sy("excelName的值:"+excelName+"*************************************************************"); Sy("path的值:"+path+"*************************************************************"); FileOutputStream outputStream = new FileOutputStream(fileURL); ou(); //写入生成的excel表格到服务端/statics/download/下 workbook.write(outputStream); ou(); ResData resData =new ResData(); re("200"); re("操作信息"); re("0"); re(excelName+".xls"); re("导出了一个excel表格到/statics/download文件夹下"); return resData; }catch(Exception ex){ Sy("返回到service层后catch后***************************************************************"); ex.printStackTrace(); ResData resData =new ResData(); re("400"); re("操作信息"); re("0"); re("errorURL"); re()); return resData; } }

需要注意的几点:

一定要注意路径的问题!!!

我在这里也走了几天的弯路,一个是fileoutstream流对应输出的地址,采用以下方式,可以灵活的处理路径的问题。最后就是运行后的页面效果见下面

String path = req.getSession().getServletContext().getRealPath ("/statics/download/");

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“如何通过ajax在html中输出表格中是值”边界阅读