element-ui实现下载动态进度条,可实现批量下载,附Blob文件类型对照表
element-ui实现下载动态进度条,可实现批量下载,附Blob文件类型对照表
①页面结构使用element-ui的进度条组件,示例为圆形,具体样式根据需求确定
<el-button>下载</el-button>
<el-progress type="circle" :percentage="25"></el-progress>
type为进度条的类型,percentage为进度百分比
②测试效果:点击“下载‘按钮开始发送请求进行下载,下载期间"下载"按钮不可点击,下载完成后按钮恢复默认可点击状态
通过el-button的禁用效果实现,disabled接收一个Boolean值,值为true时禁用
<el-button disabled="isDisabled">下载</el-button>
<el-progress type="circle" :percentage="25"></el-progress>
//在data中定义isDisabled控制按钮是否可以点击
data() {return {isDisabled:false//默认可点击}
}
③通过在data中定义值来控制进度条组件的进度
<el-button disabled="isDisabled">下载</el-button>
<el-progress type="circle" :percentage="percentage"></el-progress>
data() {return {isDisabled:false,//默认可点击percentage:0//默认进度为0}
}
④定义下载方法,请求下载文件
<el-button disabled="isDisabled" @click="getProgress">下载</el-button>
<el-progress type="circle" :percentage="percentage"></el-progress>
//在methods中定义下载方法
getProgress() {//进度条恢复为 0 this.percentage = 0;//按钮不可点击this.isDisabled = true;//发起请求axios({//下载文件的远端地址,此处以exe文件为例url: "http://xxx/vvv.exe",//请求方式 get。 method: "get",//设置返回数据类型为base64的数据,这样才可以被new Blob() 解析。 responseType: "blob",//请求参数 get-->params post-->data 。params: {},//xml返回数据的钩子函数,可以用来获取数据的进度 具体可查看axios的官网onDownloadProgress: (progressEvent) => {//progressEvent.loaded 下载文件的当前大小//progressEvent.total 下载文件的总大小,一般返回值都有,如果返回值没有,请让他加上,否则进度条将不是实时改变!let progressBar = Math.round(progressEvent.loaded / progressEvent.total * 100);this.percentage = progressBar;this.title = "下载中";}}).then(res => {//当前定义res.message 出现的时候说明后端文件返回出现了问题 不然应该直接是个文件流 if (res.message) {this.title = "下载失败,请稍后重试"this.isDisabled = falsereturn}console.log(res);//blob返回的是一个 base64 格式的文件流----[res.data根据返回值可自行修改]let blob = new Blob([res.data], {//编译文件类型。 具体可查看 blob 方法定义的类型 type: "application/x-msdownload" })//编译文件// window.navigator.meSaveOrOpenBlob方法允许用户在客户端上保存文件,如需用到,自行放开即可// if (window.navigator && window.navigator.meSaveOrOpenBlob) {// window.navigator.meSaveOrOpenBlob(blob, "文件名称.docx")// } else {let Url = window.URL.createObjectURL(blob);console.log(document);let link = document.createElement("a");link.style.display = "none";link.href = Url;link.setAttribute("download", "文件名称.exe");document.body.appendChild(link);link.click();// }//编译文件完成后,进度条展示为100%100this.percentage = 100;//下载完成 可以重新点击按钮下载this.isDisabled = false;})
}
⑤实现批量下载,抽离组件,相关数据使用props接收
⑥文档对应类型查询
文件扩展名 | Content-Type | 文件扩展名 | Content-Type |
---|---|---|---|
.*(二进制流,不知道下载文件类型) | application/octet-stream | .tif | image/tiff |
.001 | application/x-001 | .301 | application/x-301 |
.323 | text/h323 | .906 | application/x-906 |
.907 | drawing/907 | .a11 | application/x-a11 |
.acp | audio/x-mei-aac | .ai | application/postscript |
.aif | audio/aiff | .aifc | audio/aiff |
.aiff | audio/aiff | .anv | application/x-anv |
.asa | text/asa | .asf | video/x-ms-asf |
.asp | text/asp | .asx | video/x-ms-asf |
.au | audio/basic | .avi | video/avi |
.awf | application/vnd.adobe.workflow | .biz | text/xml |
.bmp | application/x-bmp | .bot | application/x-bot |
.c4t | application/x-c4t | .c90 | application/x-c90 |
.cal | application/x-cals | .cat | application/vnd.ms-pki.seccat |
.cdf | application/x-netcdf | .cdr | application/x-cdr |
.cel | application/x-cel | .cer | application/x-x509-ca-cert |
.cg4 | application/x-g4 | .cgm | application/x-cgm |
.cit | application/x-cit | .class | java/* |
.cml | text/xml | .cmp | application/x-cmp |
.cmx | application/x-cmx | .cot | application/x-cot |
.crl | application/pkix-crl | .crt | application/x-x509-ca-cert |
.csi | application/x-csi | .css | text/css |
.cut | application/x-cut | .dbf | application/x-dbf |
.dbm | application/x-dbm | .dbx | application/x-dbx |
.dcd | text/xml | .dcx | application/x-dcx |
.der | application/x-x509-ca-cert | .dgn | application/x-dgn |
.dib | application/x-dib | .dll | application/x-msdownload |
.doc | application/msword | .dot | application/msword |
.drw | application/x-drw | .dtd | text/xml |
.dwf | Model/vnd.dwf | .dwf | application/x-dwf |
.dwg | application/x-dwg | .dxb | application/x-dxb |
.dxf | application/x-dxf | .edn | application/vnd.adobe.edn |
.emf | application/x-emf | .eml | message/rfc822 |
.ent | text/xml | .epi | application/x-epi |
.eps | application/x-ps | .eps | application/postscript |
.etd | application/x-ebx | .exe | application/x-msdownload |
.fax | image/fax | .fdf | application/vnd.fdf |
.fif | application/fractals | .fo | text/xml |
.frm | application/x-frm | .g4 | application/x-g4 |
.gbr | application/x-gbr | . | application/x- |
.gif | image/gif | .gl2 | application/x-gl2 |
.gp4 | application/x-gp4 | .hgl | application/x-hgl |
.hmr | application/x-hmr | .hpg | application/x-hpgl |
.hpl | application/x-hpl | .hqx | application/mac-binhex40 |
.hrf | application/x-hrf | .hta | application/hta |
.htc | text/x-component | .htm | text/html |
.html | text/html | .htt | text/webviewhtml |
.htx | text/html | .icb | application/x-icb |
.ico | image/x-icon | .ico | application/x-ico |
.iff | application/x-iff | .ig4 | application/x-g4 |
.igs | application/x-igs | .iii | application/x-iphone |
.img | application/x-img | .ins | application/x-internet-signup |
.isp | application/x-internet-signup | .IVF | video/x-ivf |
.java | java/* | .jfif | image/jpeg |
.jpe | image/jpeg | .jpe | application/x-jpe |
.jpeg | image/jpeg | .jpg | image/jpeg |
.jpg | application/x-jpg | .js | application/x-javascript |
.jsp | text/html | .la1 | audio/x-liquid-file |
.lar | application/x-laplayer-reg | .latex | application/x-latex |
.lavs | audio/x-liquid-secure | .lbm | application/x-lbm |
.lmsff | audio/x-la-lms | .ls | application/x-javascript |
.ltr | application/x-ltr | .m1v | video/x-mpeg |
.m2v | video/x-mpeg | .m3u | audio/mpegurl |
.m4e | video/mpeg4 | .mac | application/x-mac |
.man | application/x-troff-man | .math | text/xml |
.mdb | application/msaccess | .mdb | application/x-mdb |
.mfp | application/x-shockwave-flash | .mht | message/rfc822 |
.mhtml | message/rfc822 | .mi | application/x-mi |
.mid | audio/mid | .midi | audio/mid |
.mil | application/x-mil | .mml | text/xml |
.mnd | audio/x-musicnet-download | .mns | audio/x-musicnet-stream |
.mocha | application/x-javascript | .movie | video/x-sgi-movie |
.mp1 | audio/mp1 | .mp2 | audio/mp2 |
.mp2v | video/mpeg | .mp3 | audio/mp3 |
.mp4 | video/mpeg4 | .mpa | video/x-mpg |
.mpd | application/vnd.ms-project | .mpe | video/x-mpeg |
.mpeg | video/mpg | .mpg | video/mpg |
.mpga | audio/rn-mpeg | .mpp | application/vnd.ms-project |
.mps | video/x-mpeg | .mpt | application/vnd.ms-project |
.mpv | video/mpg | .mpv2 | video/mpeg |
.mpw | application/vnd.ms-project | .mpx | application/vnd.ms-project |
.mtx | text/xml | .mxp | application/x-mmxp |
.net | image/pnetvue | .nrf | application/x-nrf |
.nws | message/rfc822 | .odc | text/x-ms-odc |
.out | application/x-out | .p10 | application/pkcs10 |
.p12 | application/x-pkcs12 | .p7b | application/x-pkcs7-certificates |
.p7c | application/pkcs7-mime | .p7m | application/pkcs7-mime |
.p7r | application/x-pkcs7-certreqresp | .p7s | application/pkcs7-signature |
.pc5 | application/x-pc5 | .pci | application/x-pci |
.pcl | application/x-pcl | .pcx | application/x-pcx |
application/pdf | application/pdf | ||
.pdx | application/vnd.adobe.pdx | .pfx | application/x-pkcs12 |
.pgl | application/x-pgl | .pic | application/x-pic |
.pko | application/vnd.ms-pki.pko | .pl | application/x-perl |
.plg | text/html | .pls | audio/scpls |
.plt | application/x-plt | .png | image/png |
.png | application/x-png | .pot | application/vnd.ms-powerpoint |
.ppa | application/vnd.ms-powerpoint | .ppm | application/x-ppm |
.pps | application/vnd.ms-powerpoint | .ppt | application/vnd.ms-powerpoint |
.ppt | application/x-ppt | .pr | application/x-pr |
.prf | application/pics-rules | .prn | application/x-prn |
.prt | application/x-prt | .ps | application/x-ps |
.ps | application/postscript | .ptn | application/x-ptn |
.pwz | application/vnd.ms-powerpoint | .r3t | text/vnd.rn-realtext3d |
.ra | audio/vnd.rn-realaudio | .ram | audio/x-pn-realaudio |
.ras | application/x-ras | .rat | application/rat-file |
.rdf | text/xml | .rec | application/vnd.rn-recording |
.red | application/x-red | .rgb | application/x-rgb |
.rjs | application/vnd.rn-realsystem-rjs | .rjt | application/vnd.rn-realsystem-rjt |
.rlc | application/x-rlc | .rle | application/x-rle |
.rm | application/vnd.rn-realmedia | .rmf | application/vnd.adobe.rmf |
.rmi | audio/mid | .rmj | application/vnd.rn-realsystem-rmj |
.rmm | audio/x-pn-realaudio | .rmp | application/vnd.rn-rn_music_package |
.rms | application/vnd.rn-realmedia-secure | .rmvb | application/vnd.rn-realmedia-vbr |
.rmx | application/vnd.rn-realsystem-rmx | .rnx | application/vnd.rn-realplayer |
.rp | image/vnd.rn-realpix | .rpm | audio/x-pn-realaudio-plugin |
.rsml | application/vnd.rn-rsml | .rt | text/vnd.rn-realtext |
.rtf | application/msword | .rtf | application/x-rtf |
.rv | video/vnd.rn-realvideo | .sam | application/x-sam |
.sat | application/x-sat | .sdp | application/sdp |
.sdw | application/x-sdw | .sit | application/x-stuffit |
.slb | application/x-slb | .sld | application/x-sld |
.slk | drawing/x-slk | .smi | application/smil |
.smil | application/smil | .smk | application/x-smk |
.snd | audio/basic | .sol | text/plain |
.sor | text/plain | .spc | application/x-pkcs7-certificates |
.spl | application/futuresplash | .spp | text/xml |
.ssm | application/streamingmedia | .sst | application/vnd.ms-pki.certstore |
.stl | application/vnd.ms-pki.stl | .stm | text/html |
.sty | application/x-sty | .svg | text/xml |
.swf | application/x-shockwave-flash | .tdf | application/x-tdf |
.tg4 | application/x-tg4 | .tga | application/x-tga |
.tif | image/tiff | .tif | application/x-tif |
.tiff | image/tiff | .tld | text/xml |
.top | drawing/x-top | .torrent | application/x-bittorrent |
.tsd | text/xml | .txt | text/plain |
.uin | application/x-icq | .uls | text/iuls |
.vcf | text/x-vcard | .vda | application/x-vda |
.vdx | application/vnd.visio | .vml | text/xml |
.vpg | application/x-vpeg005 | .vsd | application/vnd.visio |
.vsd | application/x-vsd | .vss | application/vnd.visio |
.vst | application/vnd.visio | .vst | application/x-vst |
.vsw | application/vnd.visio | .vsx | application/vnd.visio |
.vtx | application/vnd.visio | .vxml | text/xml |
.wav | audio/wav | .wax | audio/x-ms-wax |
.wb1 | application/x-wb1 | .wb2 | application/x-wb2 |
.wb3 | application/x-wb3 | .wbmp | image/vnd.wap.wbmp |
.wiz | application/msword | .wk3 | application/x-wk3 |
.wk4 | application/x-wk4 | .wkq | application/x-wkq |
.wks | application/x-wks | .wm | video/x-ms-wm |
.wma | audio/x-ms-wma | .wmd | application/x-ms-wmd |
.wmf | application/x-wmf | .wml | text/vnd.wap.wml |
.wmv | video/x-ms-wmv | .wmx | video/x-ms-wmx |
.wmz | application/x-ms-wmz | .wp6 | application/x-wp6 |
.wpd | application/x-wpd | .wpg | application/x-wpg |
.wpl | application/vnd.ms-wpl | .wq1 | application/x-wq1 |
.wr1 | application/x-wr1 | .wri | application/x-wri |
.wrk | application/x-wrk | .ws | application/x-ws |
.ws2 | application/x-ws | .wsc | text/scriptlet |
.wsdl | text/xml | .wvx | video/x-ms-wvx |
.xdp | application/vnd.adobe.xdp | .xdr | text/xml |
.xfd | application/vnd.adobe.xfd | .xfdf | application/vnd.adobe.xfdf |
.xhtml | text/html | .xls | application/vnd.ms-excel |
.xls | application/x-xls | .xlw | application/x-xlw |
.xml | text/xml | .xpl | audio/scpls |
.xq | text/xml | .xql | text/xml |
.xquery | text/xml | .xsd | text/xml |
.xsl | text/xml | .xslt | text/xml |
.xwd | application/x-xwd | .x_b | application/x-x_b |
.sis | application/vnd.symbian.install | .sisx | application/vnd.symbian.install |
.x_t | application/x-x_t | .ipa | application/vnd.iphone |
.apk | application/vnd.android.package-archive | .xap | application/x-silverlight-app |
element-ui实现下载动态进度条,可实现批量下载,附Blob文件类型对照表相关推荐
- python 进度条_Python小程序系列——动态进度条(1)
Python动态进度条I 开始我们的第一个Python程序. 显示一个动态进度条,在同一个位置显示从1%到100% 源代码附上来: import sys #有关Python运行环境的变量和函数impo ...
- ppt模板如何制作动态进度条?
想要让自己的ppt模板更加的精美,一些小细节可以提升ppt模板制作的格调,这次我们就来看看ppt模板如何制作动态进度条?ppt家园给大家介绍一下ppt模板下载的小技巧. 模板入口: https://w ...
- element UI表格绑定动态数据与selection复选操作
element UI表格绑定动态数据与selection复选操作的坑 案例介绍:此案例是要求完成对客户的批量删除功能,因为客户有多条数据所以要结合分页组件来实现,并且批量删除按钮默认是禁用的,当有数据 ...
- python动态显示进度条_实例详解python如何轻松实现动态进度条
本次的这篇文章主要是和大家分享了关于实例详解python如何轻松实现动态进度条,有需要的小伙伴可以看一下 思路及讲解 假设有一个1000000数据的列表(为了让进度条可以显示出来,很大的数据),我们每 ...
- 异步下载圆形进度条显示进度
圆形进度条参考链接即可:使用css3实现圆形进度条 需求点击下载后遮罩层显示下载进度: 1.圆形进度条参考以上链接,有点小瑕疵,可更改定位距离实现重合. 2.遮罩层: .lbOverlay{ disp ...
- bootstrap 滚动 进度条_bootstrap实现动态进度条效果
Bootstrap的动态进度条: html: 创建一个modal 这里使用fade先将modal隐藏起来,然后modal里面嵌入progress 代码很简单 保存中:{{length}}% PS: ...
- 动态的给python添加进度条_python动态进度条的实现代码
python动态进度条的实现代码,具体内容如下所示: 有时候我们需要使用print打印工作进度,正常使用print函数会导致刷屏的现象,举个最简单的例子,从1打印到10,每次停顿0.1秒 这样看起来很 ...
- EXCEL装逼指南之动态进度条(项目经理必备技能)
EXCEL装逼指南之动态进度条(项目经理必备技能) 作为浪迹职场多年的混子(项目经理),是否常常对项目进度把控不利,汇报工作又含含糊糊让领导不知所以而经常惨遭领导羞辱,同事嘲笑? 那么如何做一份让领导 ...
- java 下载文件 进度条_使用处理程序下载文件时显示百分比的进度条
我想在按钮上单击下载 .EXE 文件并在网页上显示下载进度条而不是浏览器进度条 . 这个开发背后的想法是浏览器在他的下载管理器中隐藏它的下载进度条 . 我想在下载达到100%后自动运行.EXE . 我 ...
最新文章
- ASP.NET MVC Model元数据(五)
- access database in a helper function ?
- openoffice java在线预览,使用openoffice和kkFileView实现文档在线预览
- 2017-2018-1 JAVA实验站 第三周作业
- 5233杨光--第三周实验报告
- 8中间件,csrf跨站请求伪造,auth模块
- 作品上传设计师交流社区,从而获得很好的传播效果
- 200行Python实现简单的区块链系统
- ASP.NET MVC动态二级域名及DNS(泛解析配置)
- 开源方案搭建可离线的精美矢量切片地图服务-6.Mapbox之.pbf字体库
- Matlab Tricks(十八)—— 矩阵间元素距离的计算
- Rust : 简单模拟交易所与参与机构
- python好玩的代码-我珍藏的一些好的Python代码,技巧
- chrome刷新缓存
- 在 Apple Silicon Mac 上 DFU 模式恢复 macOS 固件
- 互联网晚报 |11/24 星期四 | 比亚迪涨价2000到6000元不等;苹果15或告别纯直边;星巴克回应0.01元抢券不兑换...
- CF676A Nicholas and Permutation 题解
- 如何确保网站的安全性
- ubuntu unity 3D桌面效果
- Excel报表的制作
热门文章
- fread读文件读不完全解决
- Ubuntu 12.04编译mt6582错误 - Tracy Mcgrady的专栏 - 博客频道 - CSDN.NET awk: line 4: function strtonum never def
- Unity基础小案例---射击小球
- 学习笔记-Aircrack
- 叹服,网易JDK负责人手写 HotSpot 358页实战笔记
- 使用commons-fileupload组件上传文件(随笔)
- make server用法
- php throwable,PHP7异常与错误处理机制 Exception, Error, Throwable
- 算法训练 猴子分苹果 C/C++
- 全球最年轻的CCIE是中国人