element-ui实现下载动态进度条，可实现批量下载，附Blob文件类型对照表

已于 2023-04-20 09:23:53 修改
阅读量1.7k 收藏 10
点赞数 2
文章标签： ui vue.js javascript
于 2023-04-19 11:18:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68792354/article/details/130239947
版权

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 = false
            return
         }
         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%100
         this.percentage = 100;
         //下载完成 可以重新点击按钮下载
         this.isDisabled = false;
    })      
}
⑤实现批量下载，抽离组件，相关数据使用props接收
⑥文档对应类型查询
文件扩展名Content-Type文件扩展名Content-Type
.*(二进制流，不知道下载文件类型)application/octet-stream.tifimage/tiff
.001application/x-001.301application/x-301
.323text/h323.906application/x-906
.907drawing/907.a11application/x-a11
.acpaudio/x-mei-aac.aiapplication/postscript
.aifaudio/aiff.aifcaudio/aiff
.aiffaudio/aiff.anvapplication/x-anv
.asatext/asa.asfvideo/x-ms-asf
.asptext/asp.asxvideo/x-ms-asf
.auaudio/basic.avivideo/avi
.awfapplication/vnd.adobe.workflow.biztext/xml
.bmpapplication/x-bmp.botapplication/x-bot
.c4tapplication/x-c4t.c90application/x-c90
.calapplication/x-cals.catapplication/vnd.ms-pki.seccat
.cdfapplication/x-netcdf.cdrapplication/x-cdr
.celapplication/x-cel.cerapplication/x-x509-ca-cert
.cg4application/x-g4.cgmapplication/x-cgm
.citapplication/x-cit.classjava/*
.cmltext/xml.cmpapplication/x-cmp
.cmxapplication/x-cmx.cotapplication/x-cot
.crlapplication/pkix-crl.crtapplication/x-x509-ca-cert
.csiapplication/x-csi.csstext/css
.cutapplication/x-cut.dbfapplication/x-dbf
.dbmapplication/x-dbm.dbxapplication/x-dbx
.dcdtext/xml.dcxapplication/x-dcx
.derapplication/x-x509-ca-cert.dgnapplication/x-dgn
.dibapplication/x-dib.dllapplication/x-msdownload
.docapplication/msword.dotapplication/msword
.drwapplication/x-drw.dtdtext/xml
.dwfModel/vnd.dwf.dwfapplication/x-dwf
.dwgapplication/x-dwg.dxbapplication/x-dxb
.dxfapplication/x-dxf.ednapplication/vnd.adobe.edn
.emfapplication/x-emf.emlmessage/rfc822
.enttext/xml.epiapplication/x-epi
.epsapplication/x-ps.epsapplication/postscript
.etdapplication/x-ebx.exeapplication/x-msdownload
.faximage/fax.fdfapplication/vnd.fdf
.fifapplication/fractals.fotext/xml
.frmapplication/x-frm.g4application/x-g4
.gbrapplication/x-gbr.application/x-
.gifimage/gif.gl2application/x-gl2
.gp4application/x-gp4.hglapplication/x-hgl
.hmrapplication/x-hmr.hpgapplication/x-hpgl
.hplapplication/x-hpl.hqxapplication/mac-binhex40
.hrfapplication/x-hrf.htaapplication/hta
.htctext/x-component.htmtext/html
.htmltext/html.htttext/webviewhtml
.htxtext/html.icbapplication/x-icb
.icoimage/x-icon.icoapplication/x-ico
.iffapplication/x-iff.ig4application/x-g4
.igsapplication/x-igs.iiiapplication/x-iphone
.imgapplication/x-img.insapplication/x-internet-signup
.ispapplication/x-internet-signup.IVFvideo/x-ivf
.javajava/*.jfifimage/jpeg
.jpeimage/jpeg.jpeapplication/x-jpe
.jpegimage/jpeg.jpgimage/jpeg
.jpgapplication/x-jpg.jsapplication/x-javascript
.jsptext/html.la1audio/x-liquid-file
.larapplication/x-laplayer-reg.latexapplication/x-latex
.lavsaudio/x-liquid-secure.lbmapplication/x-lbm
.lmsffaudio/x-la-lms.lsapplication/x-javascript
.ltrapplication/x-ltr.m1vvideo/x-mpeg
.m2vvideo/x-mpeg.m3uaudio/mpegurl
.m4evideo/mpeg4.macapplication/x-mac
.manapplication/x-troff-man.mathtext/xml
.mdbapplication/msaccess.mdbapplication/x-mdb
.mfpapplication/x-shockwave-flash.mhtmessage/rfc822
.mhtmlmessage/rfc822.miapplication/x-mi
.midaudio/mid.midiaudio/mid
.milapplication/x-mil.mmltext/xml
.mndaudio/x-musicnet-download.mnsaudio/x-musicnet-stream
.mochaapplication/x-javascript.movievideo/x-sgi-movie
.mp1audio/mp1.mp2audio/mp2
.mp2vvideo/mpeg.mp3audio/mp3
.mp4video/mpeg4.mpavideo/x-mpg
.mpdapplication/vnd.ms-project.mpevideo/x-mpeg
.mpegvideo/mpg.mpgvideo/mpg
.mpgaaudio/rn-mpeg.mppapplication/vnd.ms-project
.mpsvideo/x-mpeg.mptapplication/vnd.ms-project
.mpvvideo/mpg.mpv2video/mpeg
.mpwapplication/vnd.ms-project.mpxapplication/vnd.ms-project
.mtxtext/xml.mxpapplication/x-mmxp
.netimage/pnetvue.nrfapplication/x-nrf
.nwsmessage/rfc822.odctext/x-ms-odc
.outapplication/x-out.p10application/pkcs10
.p12application/x-pkcs12.p7bapplication/x-pkcs7-certificates
.p7capplication/pkcs7-mime.p7mapplication/pkcs7-mime
.p7rapplication/x-pkcs7-certreqresp.p7sapplication/pkcs7-signature
.pc5application/x-pc5.pciapplication/x-pci
.pclapplication/x-pcl.pcxapplication/x-pcx
.pdfapplication/pdf.pdfapplication/pdf
.pdxapplication/vnd.adobe.pdx.pfxapplication/x-pkcs12
.pglapplication/x-pgl.picapplication/x-pic
.pkoapplication/vnd.ms-pki.pko.plapplication/x-perl
.plgtext/html.plsaudio/scpls
.pltapplication/x-plt.pngimage/png
.pngapplication/x-png.potapplication/vnd.ms-powerpoint
.ppaapplication/vnd.ms-powerpoint.ppmapplication/x-ppm
.ppsapplication/vnd.ms-powerpoint.pptapplication/vnd.ms-powerpoint
.pptapplication/x-ppt.prapplication/x-pr
.prfapplication/pics-rules.prnapplication/x-prn
.prtapplication/x-prt.psapplication/x-ps
.psapplication/postscript.ptnapplication/x-ptn
.pwzapplication/vnd.ms-powerpoint.r3ttext/vnd.rn-realtext3d
.raaudio/vnd.rn-realaudio.ramaudio/x-pn-realaudio
.rasapplication/x-ras.ratapplication/rat-file
.rdftext/xml.recapplication/vnd.rn-recording
.redapplication/x-red.rgbapplication/x-rgb
.rjsapplication/vnd.rn-realsystem-rjs.rjtapplication/vnd.rn-realsystem-rjt
.rlcapplication/x-rlc.rleapplication/x-rle
.rmapplication/vnd.rn-realmedia.rmfapplication/vnd.adobe.rmf
.rmiaudio/mid.rmjapplication/vnd.rn-realsystem-rmj
.rmmaudio/x-pn-realaudio.rmpapplication/vnd.rn-rn_music_package
.rmsapplication/vnd.rn-realmedia-secure.rmvbapplication/vnd.rn-realmedia-vbr
.rmxapplication/vnd.rn-realsystem-rmx.rnxapplication/vnd.rn-realplayer
.rpimage/vnd.rn-realpix.rpmaudio/x-pn-realaudio-plugin
.rsmlapplication/vnd.rn-rsml.rttext/vnd.rn-realtext
.rtfapplication/msword.rtfapplication/x-rtf
.rvvideo/vnd.rn-realvideo.samapplication/x-sam
.satapplication/x-sat.sdpapplication/sdp
.sdwapplication/x-sdw.sitapplication/x-stuffit
.slbapplication/x-slb.sldapplication/x-sld
.slkdrawing/x-slk.smiapplication/smil
.smilapplication/smil.smkapplication/x-smk
.sndaudio/basic.soltext/plain
.sortext/plain.spcapplication/x-pkcs7-certificates
.splapplication/futuresplash.spptext/xml
.ssmapplication/streamingmedia.sstapplication/vnd.ms-pki.certstore
.stlapplication/vnd.ms-pki.stl.stmtext/html
.styapplication/x-sty.svgtext/xml
.swfapplication/x-shockwave-flash.tdfapplication/x-tdf
.tg4application/x-tg4.tgaapplication/x-tga
.tifimage/tiff.tifapplication/x-tif
.tiffimage/tiff.tldtext/xml
.topdrawing/x-top.torrentapplication/x-bittorrent
.tsdtext/xml.txttext/plain
.uinapplication/x-icq.ulstext/iuls
.vcftext/x-vcard.vdaapplication/x-vda
.vdxapplication/vnd.visio.vmltext/xml
.vpgapplication/x-vpeg005.vsdapplication/vnd.visio
.vsdapplication/x-vsd.vssapplication/vnd.visio
.vstapplication/vnd.visio.vstapplication/x-vst
.vswapplication/vnd.visio.vsxapplication/vnd.visio
.vtxapplication/vnd.visio.vxmltext/xml
.wavaudio/wav.waxaudio/x-ms-wax
.wb1application/x-wb1.wb2application/x-wb2
.wb3application/x-wb3.wbmpimage/vnd.wap.wbmp
.wizapplication/msword.wk3application/x-wk3
.wk4application/x-wk4.wkqapplication/x-wkq
.wksapplication/x-wks.wmvideo/x-ms-wm
.wmaaudio/x-ms-wma.wmdapplication/x-ms-wmd
.wmfapplication/x-wmf.wmltext/vnd.wap.wml
.wmvvideo/x-ms-wmv.wmxvideo/x-ms-wmx
.wmzapplication/x-ms-wmz.wp6application/x-wp6
.wpdapplication/x-wpd.wpgapplication/x-wpg
.wplapplication/vnd.ms-wpl.wq1application/x-wq1
.wr1application/x-wr1.wriapplication/x-wri
.wrkapplication/x-wrk.wsapplication/x-ws
.ws2application/x-ws.wsctext/scriptlet
.wsdltext/xml.wvxvideo/x-ms-wvx
.xdpapplication/vnd.adobe.xdp.xdrtext/xml
.xfdapplication/vnd.adobe.xfd.xfdfapplication/vnd.adobe.xfdf
.xhtmltext/html.xlsapplication/vnd.ms-excel
.xlsapplication/x-xls.xlwapplication/x-xlw
.xmltext/xml.xplaudio/scpls
.xqtext/xml.xqltext/xml
.xquerytext/xml.xsdtext/xml
.xsltext/xml.xslttext/xml
.xwdapplication/x-xwd.x_bapplication/x-x_b
.sisapplication/vnd.symbian.install.sisxapplication/vnd.symbian.install
.x_tapplication/x-x_t.ipaapplication/vnd.iphone
.apkapplication/vnd.android.package-archive.xapapplication/x-silverlight-app
sansanir
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
javascript 实现页面加载进度条代码
10-29
javascript 实现页面加载进度条代码，需要的朋友可以参考下。
vue + element-ui实现简洁的导入导出功能
11-27
cnpm install element-ui -S 在main.js中引入 import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' 全局安装 Vue.use(ElementUI) 当我们安装完记得重新运行，cnpm run dev ，...
VUE+element UI 纯前端大文件下载百分比进度条
m0_64781270的博客
09-13 1817
如有优化解决方法 可在此基础上实现真实下载进度展示 axios。
通过el-progress封装的进度条
最新发布
Achong999的博客
03-14 635
用法：progressShow属性触发进度条显示隐藏（必填），其他的可不填，有其他需求可自行添加。
vue与elementUI进度条组件并控制进度条加载速度（文件下载为例）
00年女程序员分享自己的学习笔记
09-05 3868
vue与elementUI进度条组件并控制进度条加载速度（文件下载为例） 这里采用的“假进度条”，触发下载时先让他平稳加载，最后加载完成直接百分之百。 采用progress进度条组件 点击确定下载按钮，会显示进度条，并且每隔500ms加载5%。 下面就调用接口，调用完成就this.progressPercent=100
el-progress 动画效果进度条（动态进度条）
weixin_53959748的博客
07-06 7012
element进度条动画效果
electron 下载文件显示进度条 监听下载过程，计算并设置百分比进度
weixin_42175823的博客
06-29 2686
实现一个下载进度条, 可以实时看到下载进度,下载前可以选择文件保存位置支持原生的系统托盘增强网络状态变更的感知而且不通过系统浏览器下载携带敏感信息 ,而是在 APP 里实现理论上更安全。
vue+axios+element-ui实现导出excel文件且显示导出百分比进度条
yyh123456hhh的博客
07-10 1927
vue+axios+element-ui实现导出excel文件且显示导出百分比进度条。导出格式为excel,导出过程中，弹窗显示正在导出...，以及导出进度百分比直到100%自动关闭。
常用文件流下载文件（ Blob）时各种类型文件的 type
02-09
常用文件流下载文件（ Blob）时各种类型文件的 type
vue-以文件流-blob-的形式-下载-导出文件操作
10-14
主要介绍了vue-以文件流-blob-的形式-下载-导出文件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于Blod的ajax进度条下载实现示例代码
10-20
本篇文章主要介绍了基于Blod的ajax进度条下载实现示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
javascript使用Blob对象实现的下载文件操作示例
10-15
主要介绍了javascript使用Blob对象实现的下载文件操作,结合实例形式分析了javascript使用Blob对象下载文件相关原理、操作技巧与注意事项,需要的朋友可以参考下
懒人版js处理后端二进制流，并通过blob下载对应格式的文件
greendx的博客
05-16 1090
需要注意的是如果要从后端获取文件名，需要res.headers["content-disposition"]去获取并处理，前提是先检查前端axios请求拦截器是否进行了相应的拦截处理并且后端header头部加上。题外话：如果通过a标签和location.href直接访问请求链接（?xx=可带参），浏览器会直接下载对应的文件，但无法处理节流问题，所以需要异步请求来实现需求。补充：如果遇到跨域问题，如有reset()，请在reset之后添加以下Header。
【element-ui】el-progress 前端自定义进度条
花椒和蕊的博客
11-08 3446
自定义进度条
element UI中loading加载框的花式用法
钱多多的博客
07-27 1万+
前端为了优化体验效果必不可少的就是加载框loading的使用。接口是异步的，获取数据是需要时间的，万一网络再卡顿下，总不能让用户干等着没数据的页面。那loading就必不可少了！
vue+elementui中进度条组件应用写法_在vue中如何实现页面加载进度条组件
qq_48965193的博客
12-02 2362
vue+elementui中进度条组件应用写法
给element-ui的table添加自己的滚动条
PK的博客
06-25 7435
element-ui的table表格的滚动条并不能满足我们实际的开发需求，特别是对于window用户来说，当表格超出屏幕范围时，每当要滑动时都需要滑到最底部才能滚动，很不方便。还有就是启用冻结效果后，滚动条被盖住的问题。本文就是为了解决这些问题，先看看实际效果。 1、效果 1、滑到底部时 2、未滑到底部时 效果还是很不错的，十分丝滑。 看了效果后直接开干吧。 2、操作流程 1、首先去除掉原有element-ui的滚动条 找到el-table__body-wrapper类，添加样式，这里也要考虑到兼容问题
Vue加element Ui 实现下载文件和进度条展示。
zzz305379801的博客
10-29 5223
<el-progress :percentage="percentage"></el-progress> <h1>{title}</h1> <el-button :disabled="isDisabled" @click="getProgress">下载文件</el-button> <script> export default { data(){ return { t.
vue.js通过element-ui实现上传进度条展示
热门推荐
weixin_42609712的博客
01-21 3万+
一、简单记一下： 1、使用的组件：el-upload / el-dialog /el-progress 2、上传事件处理 3、axios发送http请求，并通过回调函数传递进度progress 二、遇到的难点： 1、progress获取 直接写到方法里好像获取不到，使用callback回调函数解决的； 2、进度展示 将progress给进度条组件，经大神指导，将progress直接封装到...
element vue 上传模板_Vue+Element-UI实现上传图片并压缩
06-01
好的，针对您的问题，以下是实现 Vue+Element-UI上传图片并压缩的基本步骤： 1. 安装依赖 在项目中安装 Element-UI 和插件 vue-image-crop-upload 以及图片压缩库，可使用以下命令： ``` npm install element-ui vue-image-crop-upload compressjs --save ``` 2. 引入 Element-UI 在 main.js 中引入 Element-UI： ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 使用 vue-image-crop-upload 在需要上传图片的组件中使用 vue-image-crop-upload，可使用以下代码： ```vue <template> <div> <vue-image-crop-upload ref="upload" :url="uploadUrl" :headers="uploadHeaders" :size="size" :accept="accept" :beforeUpload="beforeUpload" :cropConfig="cropConfig" :compressConfig="compressConfig" @input="handleInput" @crop-success="handleCropSuccess" > <el-button size="small" type="primary">上传图片</el-button> </vue-image-crop-upload> </div> </template> <script> import VueImageCropUpload from 'vue-image-crop-upload' export default { components: { VueImageCropUpload }, data() { return { uploadUrl: 'xxx', // 上传地址 uploadHeaders: { // 上传请求头 Authorization: 'Bearer ' + getToken() }, size: 1024 * 1024 * 2, // 上传图片大小限制 accept: '.jpg,.jpeg,.png', // 上传图片格式限制 cropConfig: { // 图片裁剪配置 aspectRatio: 1 / 1, autoCropArea: 1, viewMode: 1, zoomable: false, guides: false, dragMode: 'move', cropBoxResizable: false, crop: () => {} }, compressConfig: { // 图片压缩配置 targetSize: 1024 * 1024, // 目标大小 quality: 0.7, // 压缩质量 mimeType: 'image/jpeg' // 输出格式 } } }, methods: { beforeUpload(file) { // 文件上传前的回调函数 this.$refs.upload.startUpload() }, handleInput(file) { // 文件选择后的回调函数 this.$refs.upload.showCrop() }, handleCropSuccess(blob, file) { // 图片裁剪成功后的回调函数 this.compressImage(blob, file) // 压缩图片 }, compressImage(blob, file) { // 图片压缩 const reader = new FileReader() reader.readAsDataURL(blob) reader.onload = (e) => { const base64 = e.target.result const compressedBlob = Compress.compress(base64, this.compressConfig) const compressedFile = new File([compressedBlob], file.name, { type: compressedBlob.type }) this.$emit('upload', compressedFile) // 触发上传事件 } } } } </script> ``` 4. 完成上传 在父组件中监听上传事件，使用 axios 或其他方法上传文件至服务器： ```vue <template> <div> <upload :action="uploadUrl" @upload="handleUpload"></upload> </div> </template> <script> import axios from 'axios' import Upload from './Upload.vue' export default { components: { Upload }, data() { return { uploadUrl: 'xxx' // 上传地址 } }, methods: { handleUpload(file) { const formData = new FormData() formData.append('file', file) axios.post(this.uploadUrl, formData).then(response => { console.log(response.data) }) } } } </script> ``` 以上就是实现 Vue+Element-UI上传图片并压缩的基本步骤，您可以根据您的具体需求进行修改和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值