ajax导入excel文档及结果下载(很久没用前端了,记下来)

js引用layer.js,ajaxfileupload.js,xlsx.core.min.js

layer.js是个很不错的弹出层解决方案

git地址:https://github.com/sentsin/layer

ajaxfileupload.js负责文件上传,不过由于很久没有更新,对于jquery1.4之后的版本不兼容,需要在源码处jQuery.extend中添加handleError函数

git地址:https://github.com/carlcarl/AjaxFileUpload

handleError: function( s, xhr, status, e ){  
        // If a local callback was specified, fire it  
        if ( s.error ) {  
            s.error.call( s.context || s, xhr, status, e );  
        }  
  
        // Fire the global callback  
        if ( s.global ) {  
            (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );  
        }  
	} ,

java后端springMVC

前端主要代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script src="${ctx}/static/layer/layer.js"></script>
<link rel="stylesheet" href="${ctx}/static/layer/theme/default/layer.css?v=3.1.1" id="layuicss-layer">
<link rel="stylesheet" href="${ctx}/static/layer/theme/moon/style.css" id="layuicss-thememoonstylecss">
<body class="J_scroll_fixed">
<div class="wrap_pop">
        <div class="table_full" style="padding:20px;">
               <table>
                   <tr>
                       <td>
                           <input id="stockCode" multiple="multiple" type="file" name="excel"/>
                       </td>
                   </tr>
                   <tr>
                       <td class="center">
                       </td>
                   </tr>
                   <tr>
                       <shiro:hasPermission name="/test/batchAddBusinessAuthority">
                           <td>
                               <button class="ace_btn btn_submit J_ajax_search_btn" onclick="ajaxFileUpload()" >立即导入</button>
                           </td>
                       </shiro:hasPermission>
                   </tr>
               </table>
        </div>
</div>

</div>
<script src="${ctx}/static/resources/ajaxfileupload.js?${version}" type="text/javascript"></script>
<script src="${ctx}/static/excel/xlsx/xlsx.core.min.js?${version}" type="text/javascript"></script>
<script type="text/javascript">
//将一个sheet转成最终的excel文件的blob对象,然后利用URL.createObjectURL下载
function sheet2blob(sheet, sheetName) {
    sheetName = sheetName || 'sheet1';
    var workbook = {
        SheetNames: [sheetName],
        Sheets: {}
    };
    workbook.Sheets[sheetName] = sheet;
    // 生成excel的配置项
    var wopts = {
        bookType: 'xlsx', // 要生成的文件类型
        bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
        type: 'binary'
    };
    var wbout = XLSX.write(workbook, wopts);
    var blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"});
    // 字符串转ArrayBuffer
    function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
    return blob;
}
function openDownloadDialog(url, saveName)
{
    if(typeof url == 'object' && url instanceof Blob)
    {
        url = URL.createObjectURL(url); // 创建blob地址
    }
    var aLink = document.createElement('a');
    aLink.href = url;
    aLink.download = saveName || ''; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
    var event;
    if(window.MouseEvent) event = new MouseEvent('click');
    else
    {
        event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    }
    aLink.dispatchEvent(event);
    parent.closeImportDialog();
}

function ajaxFileUpload() {
    $.ajaxFileUpload
    (
        {
            url: '${ctx}/test/batchAddBusinessAuthority', //用于文件上传的服务器端请求地址
            secureuri: false, //是否需要安全协议,一般设置为false
            fileElementId: 'stockCode', //文件上传域的ID
            dataType: 'json', //返回值类型 一般设置为json
            success: function (data, status)  //服务器成功响应处理函数
            {
                if (typeof (data.success) != 'undefined') {
                	if(typeof (data.referer) != 'undefined'&&data.referer=='1'){
                		if (!data.success) {
                			layer.alert(data.msg, {
                				  btn:['下载结果反馈'],
                				  skin: 'layui-layer-molv' //样式类名
                				  ,closeBtn: 0
                				}, function(){
                					var aoa = [
                					    ['用户ID', '失败原因']
                					];
                					var indexJ = 1;
                					data.obj.forEach(function(o){
                						var oj = [o.userId,o.msg]
                						aoa[indexJ] = oj;
                						indexJ++;
                					});
                					var sheet = XLSX.utils.aoa_to_sheet(aoa);
                					openDownloadDialog(sheet2blob(sheet), '导出结果反馈.xlsx');
                				});
                        } else {
                        	layer.alert(data.msg, {
              				  btn:['确定'],
              				  skin: 'layui-layer-molv' //样式类名
              				  ,closeBtn: 0
              				}, function(){
              					parent.closeImportDialog();
              				});
                        }
                	}else{
                		layer.msg(data.msg, {time: 2000, icon:2});
                	}
                }else{
                	layer.msg('导入失败 ', {time: 2000, icon:2});
                }
            },
            error: function (data,status, e)//服务器响应失败处理函数
            {
            	if (!data.success) {
            		layer.msg(data.msg, {time: 2000, icon:3});
                } else {
                    parent.closeImportDialog();
                }
            }
        }
    )
    return false;
}
</script>
</body>
</html>

controller代码

private List<Map<String,Object>> businessAuthorityResult = new ArrayList<Map<String,Object>>();

	@ResponseBody
	@RequestMapping(value = "/batchAddBusinessAuthority")
	public AjaxJson batchAddBusinessAuthority(MultipartFile excel, HttpServletResponse httpResponse) {
		List<BusinessAuthorityVO> list = null;
		AjaxJson json = new AjaxJson();
		int success = 0;
		int failed = 0;
		try {
			businessAuthorityResult.clear();
			// 获取当前用户
            Session session = WebUtils.getShiroSession();
            RalUserVO user =(RalUserVO)session.getAttribute(OmsStaticType.USER_SESSION);
			list = (List<BusinessAuthorityVO>) ExcelUtil.getInstance().readExcelFromUpload(excel.getInputStream(),BusinessAuthorityVO.class, 0, 0);
			ResponseVO respVO;
			Map<String,Object> saveResultMap;
			for (BusinessAuthorityVO vo:list) {
				if(StringUtil.isEmpty(vo.getUserId()))continue;
				saveResultMap = new HashMap<String,Object>();
				vo.setOprUser(user.getUserId());
				vo.setOprUserName(user.getName());
				saveResultMap.put("userId", vo.getUserId());
				try {
					respVO = p2PService.saveBusinessAuthority(vo);
					if(respVO.getCode()==StaticType.CodeType.OK.getCode()) {
						success++;
					}else {
						failed++;
					}
					saveResultMap.put("msg", respVO.getCode()==StaticType.CodeType.OK.getCode()?"保存成功":respVO.getMessage());
				} catch (Exception e) {
					saveResultMap.put("msg", "导入异常");
					failed++;
				}
				businessAuthorityResult.add(saveResultMap);
			}
			if(failed>0) {
				json.setSuccess(false);
				json.setObj(businessAuthorityResult);
			}else {
				json.setSuccess(true);
			}
			json.setReferer("1");
			json.setMsg("导入成功"+success+"个,失败"+failed+"个");
		} catch (Exception e) {
			json.setSuccess(false);
			json.setMsg("导入业务权限配置异常,请检查EXCEL文件");
			logger.error("导入业务权限配置异常",e);
		}
        return json;
	}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章