开发框架
前端
angularJS1.6
下载和保存文件FileSaver:https://github.com/eligrey/FileSaver.js/
后端
.net WebAPI
1 导入Excel文件关键代码
1.1 导入Excel弹出框
1.2 模态框html代码
<div class="modal fade" id="importExcelPop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" style="width:610px;height:100px;" role="document"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title">导入Excel文件</div> </div> <div class="modal-body"> <form class="form-horizontal" id="importExcelForm"> <div class="form-group"> <label for="import" class="col-sm-2 control-label">选择文件:</label> <div class="col-sm-5"> <div class="form-control" type="text" name="fileName" readonly placeholder="" ng-required="isAdd" title="{{file ? file.name : ‘‘}}"> {{file ? file.name : ‘‘ | limitString :20}} </div> </div> <div class="col-sm-5"> <button type="button" type="file" ngf-select ng-model="file" accept=".xls,.xlsx" class="btn btn-not-important browse inline-div">{{‘Browse‘ | translate }}</button> </div> </div> </form> </div> <div class="modal-footer" style="padding-left:113px;"> <button type="button" class="btn btn-primary" ng-disabled="!file" ng-click=”upload()">导入</button> <button type="button" class="btn btn-third" data-dismiss="modal">取消</button> </div> </div> </div> </div>
1.3 导入js代码
// 上传文件地址 var uploadUrl = apiInterceptor.webApiHostUrl + ‘/test/Upload‘; // angularjs上传方法 $scope.upload = function() {if ($scope.file) { // 选中文件 importData(); } }; // 导入数据 var importData = function() { if (!$scope.file || !$scope.file.name) { SweetAlert.info(‘请选择文件‘); return; } // $q需要注入 var deferred = $q.defer(); var tempFileName = PWC.newGuid() + ‘.dat‘; var token = $(‘input[name="__RequestVerificationToken"]‘).val(); Upload.upload({ url: uploadUrl, data: { cancel: false, filename: $scope.file.name, }, file: $scope.file, resumeChunkSize: resumable ? $scope.chunkSize : null, headers: { ‘Access-Control-Allow-Origin‘: ‘*‘, Authorization: apiInterceptor.tokenType + ‘ ‘ + apiInterceptor.apiToken, __RequestVerificationToken: token, withCredentials: true }, __RequestVerificationToken: token, withCredentials: true }).then(function(resp) { var ret = resp.data; deferred.resolve(); }, function(resp) { deferred.resolve(); console.log(‘Error status: ‘ + resp.statusText); }, function(evt) { deferred.resolve(); var progressPercentage = parseInt(100.0 * evt.loaded / evt.total); $log.debug(‘progress: ‘ + progressPercentage + ‘% ‘ + evt.config.data.file.name); }); };
1.4 webAPI的TestController方法
/// <summary> /// Uploads this instance. /// </summary> /// <returns></returns> [Route("Upload")] [HttpPost] public IHttpActionResult Upload() { if (HttpContext.Current.Request.Files.Count == 0) { return this.Ok(new OperationResultDto() { Result = false, ResultMsg = Message.Error.NoFile }); } var file = HttpContext.Current.Request.Files[0]; var mappedPath = HostingEnvironment.MapPath("~/Upload"); var fileFullPath = Path.Combine(mappedPath, Guid.NewGuid().ToString().ToUpper() + Path.GetFileName(file.FileName)); var saveFileResult = this.SaveFile(file, mappedPath, fileFullPath); if (!saveFileResult.Result) { return this.Ok(saveFileResult); } OperationResultDto ret = new OperationResultDto(); string errorMsg = string.Empty; Dictionary < System.Guid, string > error = new Dictionary < Guid, string > (); try { // 读取Excel文件,自己实现 // var getImportDataResult = this.GetImportFileData(mappedPath, fileFullPath); // if (!getImportDataResult.Result) { // return this.Ok(getImportDataResult); // } // 业务处理 } catch (Exception ex) { errorMsg = ex.Message.ToString(); error.Add(System.Guid.NewGuid(), ex.StackTrace.ToString()); } finally { File.Delete(fileFullPath); } if (!string.IsNullOrEmpty(errorMsg)) { ret.ResultMsg = errorMsg; ret.Errors = error; } return this.Ok(ret); } /// <summary> /// Saves the file. /// </summary> /// <param name="file">The file.</param> /// <param name="mappedPath">The mapped path.</param> /// <param name="fileFullPath">The file full path.</param> /// <returns></returns> private OperationResultDto SaveFile(HttpPostedFile file, string mappedPath, string fileFullPath) { string errorMsg = string.Empty; Dictionary < System.Guid, string > error = new Dictionary < Guid, string > (); try { if (Directory.Exists(mappedPath) == false) { Directory.CreateDirectory(mappedPath); } file.SaveAs(fileFullPath); } catch (Exception ex) { errorMsg = Message.Error.SaveFileError; error.Add(System.Guid.NewGuid(), ex.StackTrace.ToString()); } return new OperationResultDto() { ResultMsg = errorMsg, Result = string.IsNullOrEmpty(errorMsg), Errors = error }; }
2 下载Excel关键代码
2.1 UI
2.2 html代码
<button type="button" class="btn" ng-click="down ()"> <i class="fa fa-download" aria-hidden="true"></i>下载模板</button>
2.3 js代码
Js Controller代码
$scope.down = function() { testService. download (); };
Js webservice方法
download: function() { var thisConfig = apiConfig.create(); thisConfig.responseType = "arraybuffer"; return $http.post(‘/test/download‘, {}, thisConfig).then(function(response) { var data = new Blob([response.data], { type: response.headers(‘Content-Type‘) }); // var filename1 = response.headers(‘Content-Disposition‘).split(‘;‘)[1].trim().substr(‘filename=‘.length); var filename = ‘Excel.xlsx‘; // FileSaver 是一个插件 FileSaver.saveAs(data, filename); }); }
2.4 webAPI方法
[HttpPost] [Route("download")] public HttpResponseMessage Download (object o) { var filePath = HostingEnvironment.MapPath("~/downLoad/Excel.xlsx"); string customFileName = Constant.FileName + DateTime.Now.ToString("yyyyMMddHHmmss") + ".xlsx"; //客户端保存的文件名 FileStream fileStream = new FileStream(filePath, FileMode.Open, FileAccess.Read, FileShare.Read); System.IO.MemoryStream ms = new System.IO.MemoryStream(); fileStream.CopyTo(ms); var response = this.Request.CreateResponse(HttpStatusCode.OK); response.Content = new ByteArrayContent(ms.ToArray()); response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment"); response.Content.Headers.ContentDisposition.FileName = customFileName; response.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"); // 这句话要告诉浏览器要下载文件 return response; }
时间: 2024-10-10 22:40:04