.Net Core WebAPI + Axios +Vue 实现下载与下载进度条
故事的开始
老板说:系统很慢,下载半个小时无法下载,是否考虑先压缩再给用户下载?
本来是已经压缩过了,不过第一反应应该是用户下的数量多,导致压缩包很大,然后自己测试发现,只是等待的时间比较久而已,仍然是下载状态中,并不是系统慢,但是用户体验肯定是最直观的,确实是我们做得不够好,单纯弹出遮罩层显示冰冷的“拼命加载中……”,对用户来说确实不够友好。嗯,了解实际情况了,那就开撸,增加用户体验。
解决它
效果图:
Vue+ElementUI
<el-progress v-if="dlProgress>0" :text-inside="true" :stroke-width="18" :percentage="dlProgress" status="success" style="margin-bottom:10px"></el-progress>
Axios
downloadTask(index,row) { let own =this; this.fullscreenLoading = true; this.axios({ method: 'post', url: this.baseUrl + '/api/Task/DownLoad', data: {id: row.id}, responseType: 'blob',
//敲黑板 onDownloadProgress (progress) { own.dlProgress=Math.round(progress.loaded / progress.total * 100); } }) .then((res) => { this.fullscreenLoading = false; let fileName = decodeURI(res.headers["content-disposition"].split("=")[1]); let url = window.URL.createObjectURL(new Blob([res.data])); let link = document.createElement('a'); link.style.display = 'none'; link.href = url; link.setAttribute('download', fileName); document.body.appendChild(link); link.click();
document.body.removeChild(link); this.$message.success('下载成功'); }) .catch(() => { this.fullscreenLoading = false; }); },
下载:
protected IActionResult DownLoad(string fullFilePath) { var fileName = Path.GetFileName(fullFilePath); HttpContext.Response.Headers.Append("Content-Disposition", "attachment;filename=" + System.Web.HttpUtility.UrlEncode(fileName)); var contentType = Common.Helper.FileHelper.GetContentType(fileName); var stream = new FileStream(fullFilePath, FileMode.Open, FileAccess.Read, FileShare.ReadWrite); return File(stream, contentType); } protected IActionResult DownLoad(VDownloadByte download) { if (string.IsNullOrEmpty(download.fileName)) return new JsonResult(ShowError("生成文件失败")); var fileName = Path.GetFileName(download.fileName); HttpContext.Response.Headers.Append("Content-Disposition", "attachment;filename=" + System.Web.HttpUtility.UrlEncode(fileName)); var contentType = Common.Helper.FileHelper.GetContentType(fileName); return File(download.fileByte, contentType); } protected IActionResult DownLoad(VDownloadStream download) { if (string.IsNullOrEmpty(download.fileName)) return new JsonResult(ShowError("生成文件失败")); var fileName = Path.GetFileName(download.fileName); HttpContext.Response.Headers.Append("Content-Disposition", "attachment;filename=" + System.Web.HttpUtility.UrlEncode(fileName)); var contentType = Common.Helper.FileHelper.GetContentType(fileName); return File(download.Stream, contentType); }
分片下载:
/// <summary> /// 手动分片下载 /// </summary> protected async Task<IActionResult> DownLoadBlock(string fullFilePath) { var fileName = Path.GetFileName(fullFilePath); int bufferSize = 1024; Response.ContentType = FileHelper.GetContentType(fileName); Response.Headers.Append("Content-Disposition", "attachment;filename=" + System.Web.HttpUtility.UrlEncode(fileName)); using (FileStream fs = new FileStream(fullFilePath, FileMode.Open, FileAccess.Read, FileShare.ReadWrite)) { using (Response.Body) { long contentLength = fs.Length; Response.ContentLength = contentLength; byte[] buffer; long hasRead = 0; while (hasRead < contentLength) { if (HttpContext.RequestAborted.IsCancellationRequested) { break; } buffer = new byte[bufferSize]; int currentRead = fs.Read(buffer, 0, bufferSize); await Response.Body.WriteAsync(buffer, 0, currentRead); await Response.Body.FlushAsync(); hasRead += currentRead; } } } return new EmptyResult(); }
完美~
作者:EminemJK(山治先生)
出处:https://www.cnblogs.com/EminemJK/
您的支持是对博主最大的鼓励👍,感谢您的认真阅读。
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。