前言: 最近做項目遇到了一個需求,上傳Excel獲取數據更新Excel文檔,並直接返回更新完的Excel到前端下載;其實需求並沒有什么問題,關鍵是前端用到的是layui上傳組件(layui.upload)踩了不少坑啊;為此寫下了如下筆記:
(一)后端:

1 public async Task<string> UploadExcelUpdateExcel() 2 { 3 var file = Request.Form.Files.FirstOrDefault();//這里只獲取一個文件 4 if (file == null) 5 throw new UserFriendlyException(L("File_Empty_Error")); 6 7 long fileSize = file.Length; 8 if (fileSize > 102400) 9 throw new UserFriendlyException(L("File_SizeLimit_Error")); 10 11 string fileExtension = Path.GetExtension(file.FileName).ToLower(); 12 //限定只能上傳xls和xlsx 13 string[] allowExtension = { ".xls", ".xlsx" }; 14 15 //上傳文件類型不正確 16 if (!allowExtension.Any(x => x == fileExtension)) 17 throw new UserFriendlyException(L("File_Invalid_Type_Error")); 18 19 //獲取本機儲存地址 20 var filePath = Path.Combine(_hostingEnvironment.WebRootPath, "uploadfiles", file.FileName); 21 22 //寫入cookie 23 var httpContext = IocManager.Instance.Resolve<IHttpContextAccessor>().HttpContext; 24 25 try 26 { 27 var memoryStream = new MemoryStream(); 28 29 //創建工作台 30 IWorkbook workbook = null; 31 //操作Excel 32 using (var fileStream = file.OpenReadStream()) 33 { 34 //判斷版本2007版本.xlsx,2003版本.xls 35 if (fileExtension == ".xlsx") 36 workbook = new XSSFWorkbook(fileStream); 37 else 38 workbook = new HSSFWorkbook(fileStream); 39 //獲取第一個sheet 40 ISheet sheet = workbook.GetSheetAt(0); 41 IRow rowSour;//定義行數據 42 //定義要修改的列索引 43 var cellIndex = new int[] { 6, 11 }; 44 //獲取第一行的數據 45 var firstSour = sheet.GetRow(1); 46 var input = new ImportExcelSourInput(); 47 input.BeginDate = Convert.ToDateTime(firstSour.GetCell(4).ToString()).AddMonths(-1); 48 input.EndDate = Convert.ToDateTime(firstSour.GetCell(5).ToString()).AddMonths(-1); 49 //獲取數據源 50 var usersSour = await _basicSalaryAppService.ImportExcelSourServices(input); 51 52 //遍歷所有行 53 var cells = sheet.GetRow(0).PhysicalNumberOfCells; 54 for (var i = 1; i <= sheet.LastRowNum; i++) 55 { 56 rowSour = sheet.GetRow(i); 57 if (rowSour == null || cells != rowSour.PhysicalNumberOfCells) 58 break; 59 //獲取第三列的這個人的身份證 60 var IDCard = rowSour.GetCell(3).ToString(); 61 var thisSour = usersSour.Where(s => s.IDCard == IDCard).FirstOrDefault(); 62 //修改本期收入,住房公積金 63 if (thisSour != null) 64 { 65 rowSour.GetCell(cellIndex[0]).SetCellValue(Convert.ToDouble(thisSour.ShouldSalary)); 66 rowSour.GetCell(cellIndex[1]).SetCellValue(Convert.ToDouble(thisSour.PublicAccumulationFundsDeduction)); 67 } 68 else 69 { 70 var Name = rowSour.GetCell(1).ToString(); 71 throw new UserFriendlyException($"系統中:[ {Name} ] 身份證號:( {IDCard} )與Excel數據不一致,請修正員工檔案數據!"); 72 } 73 } 74 //寫入流 75 workbook.Write(memoryStream); 76 //恢復起始位置 77 memoryStream.Position = 0; 78 //關閉 79 fileStream?.Close(); 80 workbook?.Close(); 81 } 82 //保存至本地 83 using (var fileStm = new FileStream(filePath, FileMode.Create)) 84 { 85 memoryStream.WriteTo(fileStm); 86 87 fileStm.Dispose(); 88 } 89 } 90 catch (Exception e) 91 { 92 httpContext.Response.Cookies.Append("xinzi_message", Convert.ToBase64String(Encoding.UTF8.GetBytes($"上傳錯誤!錯誤消息:{e.Message}")), new CookieOptions 93 { 94 Expires = DateTime.Now.AddMinutes(5) 95 }); 96 97 throw new UserFriendlyException($"上傳錯誤!錯誤消息:{e.Message}"); 98 } 99 100 var path = $"{httpContext.Request.Scheme}://{httpContext.Request.Host.Value}/uploadfiles/{file.FileName}"; 101 return path;//文件路徑; 102 }
(二)前端:

1 //讀取cookies 2 function getCookie(name) { 3 var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); 4 if (arr = document.cookie.match(reg)) 5 return unescape(arr[2]); 6 else 7 return null; 8 } 9 10 upload.render({ 11 elem: '#upload-salary' 12 , url: 'UploadExcelUpdateExcel' 13 , acceptMime: ".xlsx,.xls" 14 , before: function (obj) { 15 abp.ui.setBusy("body") //上傳loading 16 } 17 , type: "file" 18 , accept: 'file' //普通文件 19 , done: function (res) { 20 var a = document.createElement('a'); 21 a.download = "導出文件名"; 22 a.href = res.result; 23 $("body").append(a); 24 a.click(); 25 abp.ui.clearBusy("body") //關閉loading 26 } 27 , error: function () { 28 var base = new Base64(); 29 //獲取后端寫入的cookie message 30 var msg = getCookie("xinzi_message"); 31 if (msg != null) 32 abp.message.error(base.decode(msg)); 33 abp.ui.clearBusy("body") //關閉loading 34 } 35 });
存在的問題:
1),layui.upload上傳組件成功后,返回類型應該是不支持返回流文件下載(歡迎大佬們指正解決方案),無奈之舉我只有在后端生成好填充完數據的Excel表格,返回服務器文件路徑下載了;
2),layui.upload上傳組件失敗的時候,服務器端拋出異常消息,前端無法展示,失敗回調函數只有兩個參數(當前文件的索引,上傳函數,官網解釋如下圖),沒有返回參數!(我去什么情況,淡淡的憂桑啊!)
百般思考終於有了如下解決方案:
a.后端catch捕獲到異常消息后,將異常消息填充到響應的Cookie中;前端異常回調函數里獲取Cookie來獲取后端傳來的消息異常。前后端代碼示例:
b.此時layui默認的上傳失敗回調函數,會拋出一個消息框上傳失敗,這里就需要手動改下upload.js的失敗回調消息提示了,我是把默認的消息提示刪了;
注:后端返回中文消息前端可能會有顯示問題,我個人是后端base64加密,前端解密來完成顯示的;

1 /** 2 * 3 * Base64 encode / decode 4 * 5 * @author haitao.tu 6 * @date 2010-04-26 7 * @email tuhaitao@foxmail.com 8 * 9 */ 10 11 function Base64() { 12 13 // private property 14 _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; 15 16 // public method for encoding 17 this.encode = function (input) { 18 var output = ""; 19 var chr1, chr2, chr3, enc1, enc2, enc3, enc4; 20 var i = 0; 21 input = _utf8_encode(input); 22 while (i < input.length) { 23 chr1 = input.charCodeAt(i++); 24 chr2 = input.charCodeAt(i++); 25 chr3 = input.charCodeAt(i++); 26 enc1 = chr1 >> 2; 27 enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); 28 enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); 29 enc4 = chr3 & 63; 30 if (isNaN(chr2)) { 31 enc3 = enc4 = 64; 32 } else if (isNaN(chr3)) { 33 enc4 = 64; 34 } 35 output = output + 36 _keyStr.charAt(enc1) + _keyStr.charAt(enc2) + 37 _keyStr.charAt(enc3) + _keyStr.charAt(enc4); 38 } 39 return output; 40 } 41 42 // public method for decoding 43 this.decode = function (input) { 44 var output = ""; 45 var chr1, chr2, chr3; 46 var enc1, enc2, enc3, enc4; 47 var i = 0; 48 input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); 49 while (i < input.length) { 50 enc1 = _keyStr.indexOf(input.charAt(i++)); 51 enc2 = _keyStr.indexOf(input.charAt(i++)); 52 enc3 = _keyStr.indexOf(input.charAt(i++)); 53 enc4 = _keyStr.indexOf(input.charAt(i++)); 54 chr1 = (enc1 << 2) | (enc2 >> 4); 55 chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); 56 chr3 = ((enc3 & 3) << 6) | enc4; 57 output = output + String.fromCharCode(chr1); 58 if (enc3 != 64) { 59 output = output + String.fromCharCode(chr2); 60 } 61 if (enc4 != 64) { 62 output = output + String.fromCharCode(chr3); 63 } 64 } 65 output = _utf8_decode(output); 66 return output; 67 } 68 69 // private method for UTF-8 encoding 70 _utf8_encode = function (string) { 71 string = string.replace(/\r\n/g, "\n"); 72 var utftext = ""; 73 for (var n = 0; n < string.length; n++) { 74 var c = string.charCodeAt(n); 75 if (c < 128) { 76 utftext += String.fromCharCode(c); 77 } else if ((c > 127) && (c < 2048)) { 78 utftext += String.fromCharCode((c >> 6) | 192); 79 utftext += String.fromCharCode((c & 63) | 128); 80 } else { 81 utftext += String.fromCharCode((c >> 12) | 224); 82 utftext += String.fromCharCode(((c >> 6) & 63) | 128); 83 utftext += String.fromCharCode((c & 63) | 128); 84 } 85 86 } 87 return utftext; 88 } 89 90 // private method for UTF-8 decoding 91 _utf8_decode = function (utftext) { 92 var string = ""; 93 var i = 0; 94 var c = c1 = c2 = 0; 95 while (i < utftext.length) { 96 c = utftext.charCodeAt(i); 97 if (c < 128) { 98 string += String.fromCharCode(c); 99 i++; 100 } else if ((c > 191) && (c < 224)) { 101 c2 = utftext.charCodeAt(i + 1); 102 string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); 103 i += 2; 104 } else { 105 c2 = utftext.charCodeAt(i + 1); 106 c3 = utftext.charCodeAt(i + 2); 107 string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); 108 i += 3; 109 } 110 } 111 return string; 112 } 113 }