开发框架
前端
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 == ) {
return this.Ok(new OperationResultDto() { Result = false, ResultMsg = Message.Error.NoFile });
} var file = HttpContext.Current.Request.Files[];
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;
}