javaweb-浏览器根据搜索条件从服务器导出/导入excel到本地

一导入excle部分

ps:用到的部分java代码在文章末尾的评论中会有连接

html代码

1,主要是在页面放置一个隐藏的file标签 ,用于导入excle选择文件 

<div style="display: none">       <input type="file" id="myfile" name="myfile" /></div>

2.触发导入事件的按钮

<a href="javascript:void(0);" onclick="importData()" class="buttonStyle">导入</a>

js部分

1.触发导入事件

function importData() {$('input:file').trigger('click').trigger('change');}

2.file按钮在初始化就为其绑定change事件 ,并ajax上传excle (ie也可导入成功 ,但返回信息会提示打开xxx.json文件,未解决//已解决 ,文章最后部分...)

$("#myfile").change(function() {if($("#myfile").val() == null || $("#myfile").val() == '') {return;}$.ajaxFileUpload({url: "../user/importData",//地址type: 'post',secureuri: false, //是否启用安全提交,默认为falsefileElementId: 'myfile', //文件选择框的id属性contentType: "text/html; charset=utf-8",dataType: 'text',success: function(data, status) { //导入成功alert('ok')},error: function(data, status, e) {alert('upload Failed!');}});});

java后台代码

1,控制器层 ,因为用的springmvc ,用CommonsMultipartFile来接受文件 (需要xml配置 ,百度之)

@SuppressWarnings("unchecked")@RequestMapping(value = "/importData", method = RequestMethod.POST)@Log(name = "xx", model = "xx", log = "xx")public ResponseEntity<?> importData(@RequestParam("myfile") CommonsMultipartFile myfile) {//myfile就是html-file插件的name属性

//校验excle的标题是否合格

String titlee = "[ID, 用户编码, 用户账号, 用户密码, 用户名称, 用户性别, 用户座机号码, 用户手机号码, 用户邮箱, 用户登录次数, 用户最近登录时间, 是否已删除]";//用到了工具类附件1 ,校验文件是否合格 ,并把excle的数据封装成Map ,把一条一条的数据分装成List<List<String>>

Map<String, Object> map = ExcelTool.checkExcel(myfile, titlee);if (map.get("success").equals("true")) {

//map.get(list)键值对获取到封装好的excel内容 ,调用service方法 ,解析list并写入数据库 ,附件2map = userService.importData((List<List<String>>) map.get("list"));}return new ResponseEntity<Map<String, Object>>(map, HttpStatus.OK);}

Excel导出部分

1.html  ,触发事件的按钮

<a href="javascript:void(0);" onclick="exportData();" class="buttonStyle">导出</a>

2.js代码 , 获取到输入框中的条件 ,并url转码防止乱码 ,最后用iframe-get请求服务器来'下载'excel

//导出excelfunction exportData() {var isDel2 = 0;if($('#yesOrNot').combobox('getText') == '已删除') {isDel2 = 1;} else if($('#yesOrNot').combobox('getText') == '未删除') {isDel2 = 0;} else if($('#yesOrNot').combobox('getText') == 'All') {isDel2 = "";}var sk = encodeURI(encodeURI($("#keyword").val()));var sk2 = encodeURI(encodeURI($("#keyword2").val()));var sk3 = encodeURI(encodeURI($("#keyword3").val()));var elemIF = document.createElement("iframe");elemIF.src = "../user/exportData?startTime=" + $('#startDate').val() +"&endTime=" + $('#endDate').val() + "&key=" + sk + "&key2=" + sk2 +"&key3=" + sk3 + "&is_deleted=" + isDel2 + "&page=1&rows=10"elemIF.style.display = "none";document.body.appendChild(elemIF)}

3.java后台部分

控制器获取到请求信息 ,从request中得参数 ,1首先调用service方法根据条件查询获取到相关list数据 ,2再调用service方法吧list数据写入excel并输出 ,service代码见附件

@SuppressWarnings("unchecked")@RequestMapping(value = "/exportData", method = RequestMethod.GET)@Log(name = "导出用户", model = "用户管理", log = "导出用户")public void exportData(PageBean vo, HttpServletRequest request, HttpServletResponse response) {try {

//设置要到处的excel的标题信息String[] cellTitle = new String[] { "ID#id", "用户编码#user_code", "用户账号#user_account", "用户密码#user_password","用户名称#user_name", "用户性别#user_gender", "用户座机号码#user_phone", "用户手机号码#user_mobile", "用户邮箱#user_email","用户登录次数#login_frequency", "用户最近登录时间#last_login_time", "是否已删除#is_deleted" };vo.setKey(URLDecoder.decode(request.getParameter("key"), "UTF-8"));vo.setKey2(URLDecoder.decode(request.getParameter("key2"), "UTF-8"));vo.setKey3(URLDecoder.decode(request.getParameter("key3"), "UTF-8"));List<Object> list = null;Map<String, Object> map2 = userService.findUserListData(vo, "1", 0);list = ((List<Object>) map2.get("rows"));UserServiceImpl.exportData(null, response, "tbl_s_user", list, cellTitle);} catch (Exception e) {throw new RestException(messageSourceHelper.getMessage(e.getMessage()));}}

修复ie浏览器的 弹出打开xxx.json

1,放弃使用springmvc的ResponseEntity<?>返回对象 ,用response对象并设置setContentType("text/html;charset=utf-8");即可

不兼容ie的控制器代码:

@SuppressWarnings("unchecked")@RequestMapping(value = "/importData", method = RequestMethod.POST)@Log(name = "导入用户", model = "用户管理", log = "导入用户")public ResponseEntity<?> importData(@RequestParam("myfile") CommonsMultipartFile myfile) {String titlee = "[ID, 用户编码, 用户账号, 用户密码, 用户名称, 用户性别, 用户座机号码, 用户手机号码, 用户邮箱, 用户登录次数, 用户最近登录时间, 是否已删除]";Map<String, Object> map = ExcelTool.checkExcel(myfile, titlee);if (map.get("success").equals("true")) {map = userService.importData((List<List<String>>) map.get("list"));}return new ResponseEntity<Map<String, Object>>(map, HttpStatus.OK);}

修改后 ,兼容ie的控制器返回data方式

@SuppressWarnings("unchecked")@RequestMapping(value = "/importData", method = RequestMethod.POST)@Log(name = "导入用户", model = "用户管理", log = "导入用户")public Map<String,Object> importData(@RequestParam("myfile") CommonsMultipartFile myfile,HttpServletResponse response) throws IOException {String titlee = "[ID, 用户编码, 用户账号, 用户密码, 用户名称, 用户性别, 用户座机号码, 用户手机号码, 用户邮箱, 用户登录次数, 用户最近登录时间, 是否已删除]";Map<String, Object> map = ExcelTool.checkExcel(myfile, titlee);if (map.get("success").equals("true")) {map = userService.importData((List<List<String>>) map.get("list"));}response.setContentType("text/html;charset=utf-8");response.getWriter().write(mapper.toJson(map));//把map转换成json字符串输出return null;}

后台代码部分:见评论区