写在前面老板说&＃xff1a;系统很慢&＃xff0c;下载半个小时无法下载&＃xff0c;是否考虑先压缩再给用户下载&＃xff1f;
本来是已经压缩过了&＃xff0c;不过第一反应应该是用户下的数量多&＃xff0c;导致压缩包很大&＃xff0c;然后自己测试发现&＃xff0c;只是等待的时间比较久而已&＃xff0c;仍然是下载状态中&＃xff0c;并不是系统慢&＃xff0c;但是用户体验肯定是最直观的&＃xff0c;确实是我们做得不够好&＃xff0c;单纯弹出遮罩层显示冰冷的“拼命加载中……”&＃xff0c;对用户来说确实不够友好。嗯&＃xff0c;了解实际情况了&＃xff0c;那就开撸&＃xff0c;增加用户体验。
解决它效果图&＃xff1a;
Vue&＃43;ElementUI
if&＃61;"dlProgress>0" :text-inside&＃61;"true" :stroke-width&＃61;"18" :percentage&＃61;"dlProgress" status&＃61;"success" style&＃61;"margin-bottom:10px">
Axios
downloadTask(index,row) { let own &＃61;this; this.fullscreenLoading &＃61; true; this.axios({ method: &＃39;post&＃39;, url: this.baseUrl &＃43; &＃39;/api/Task/DownLoad&＃39;, data: {id: row.id}, responseType: &＃39;blob&＃39;, //敲黑板 onDownloadProgress (progress) { own.dlProgress&＃61;Math.round(progress.loaded / progress.total * 100); } }) .then((res) &＃61;> { this.fullscreenLoading &＃61; false; let fileName &＃61; decodeURI(res.headers["content-disposition"].split("&＃61;")[1]); let url &＃61; window.URL.createObjectURL(new Blob([res.data])); let link &＃61; document.createElement(&＃39;a&＃39;); link.style.display &＃61; &＃39;none&＃39;; link.href &＃61; url; link.setAttribute(&＃39;download&＃39;, fileName); document.body.appendChild(link); link.click(); document.body.removeChild(link); this.$message.success(&＃39;下载成功&＃39;); }) .catch(() &＃61;> { this.fullscreenLoading &＃61; false; }); },
分片下载
public static class HttpContextExtension { /// /// 通过文件流下载文件 /// /// /// 文件完整路径 /// 访问这里 https://tool.oschina.net/commons public static void DownLoadFile(this HttpContext context,string filePath, string contentType&＃61; "application/octet-stream") { var fileName &＃61; Path.GetFileName(filePath); int bufferSize &＃61; 1024; context.Response.ContentType &＃61; contentType; context.Response.Headers.Append("Content-Disposition", "attachment;filename&＃61;" &＃43; HttpUtility.UrlEncode(fileName)); context.Response.Headers.Append("Charset", "utf-8"); context.Response.Headers.Append("Access-Control-Expose-Headers", "Content-Disposition"); //context.Response.Headers.Append("Access-Control-Allow-Origin", "*"); //使用FileStream开始循环读取要下载文件的内容 using (FileStream fs &＃61; new FileStream(filePath, FileMode.Open, FileAccess.Read)) { using (context.Response.Body) { long contentLength &＃61; fs.Length; context.Response.ContentLength &＃61; contentLength; byte[] buffer; long hasRead &＃61; 0; while (hasRead 完美~本文作者&＃xff1a;山治先生
声明&＃xff1a;本文为订阅号投稿作品&＃xff0c;未经作者允许请勿转载。
小宝贝&＃xff0c;你没看错
订阅号的确是“xLong设计”&＃xff0c;发的也的确是IT技术文章
如果喜欢就支持一下作者吧&＃xff01;
京公网安备 11010802041100号