VUE2.0 进度条

HTML5

<template>
	<!-- 每个vue文件中，只能有一个 div 根标签 -->
	<div>
		<!--下载进度条-->
		<el-dialog :title=this.title :visible.sync="queryParams.loadDialogStatus" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" width="20%">
			<div style="text-align: center;">
				<div class="form-group">
					<div>
						<!--进度条-->
						<div id="progress-body">
							<el-progress :percentage="percentage" type="circle"></el-progress>
						</div>
						<el-button :disabled="isDisabled" @click="getProgress">下载文件</el-button>
					</div>
				</div>
			</div>
			<!-- 取消下载 -->
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="downClose">取消下载</el-button>
			</div>
		</el-dialog>
	</div>
</template>


:visible.sync="testPaperViewDialog"					弹窗是否显示
:close-on-click-modal="false" 						点击空白区是否可以关闭弹窗
:close-on-press-escape="false" 						按"ESC"是否可以关闭弹窗
:show-close="false"									是否展示右上角的关闭按钮

JavaScript

<script>
	export default {
		data() {
			return {
				title: "请点击此按钮进行下载",
				percentage: 0, // 进度条的占比
				isDisabled: false, // 默认可以点击
				queryParams: {
					loadDialogStatus: false, // 控制弹窗的开关状态
				}
			}
		},
		methods: {
			// 导出文件
			downloadQuestion() {
				this.$refs['hot'].validate((pwd) => {
					if (pwd) {
						downloadQuestionBank(this.queryParams.pwd).then((response) => {
							console.log("文件导出成功");
							this.$message({
								message: '题库下载成功',
								type: 'success'
							});
						});
					}
				});
			},
			getProgress() {
				//进度条恢复为 0 
				this.percentage = 0;
				//按钮置灰 不可点击
				this.isDisabled = false;
				//发起请求
				this.$axios({
					// 下载文件的远端地址。
					url: "http://rzq0cvot1.hn-bkt.clouddn.com/l/ceshi_cloud.sql",
					//请求方式 get post。   
					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);
						//接收进度为99%的时候需要留一点前端编译的时间 (如果显示下载的进度是99%，就代表代码报错)(如果下载完成，就会在浏览器展示"下载成功")
						if (progressBar >= 99) {
							this.percentage = 99;
							this.title = '下载完成，文件正在编译。';
						} else {
							this.percentage = progressBar;
							this.title = '正在下载，请稍等。';
						}
					}
				}).then(res => {
					//当前定义res.message 出现的时候说明后端文件返回出现了问题 不然应该直接是个文件流 
					if (res.message) {
						this.title = '下载失败'
						this.isDisabled = false
						return
					}

					let zip = new JSZip(); // 创建一个ZIP对象
					zip.file("ceshi_cloud.sql", new Blob([res.data])); // 将下载的文件添加到ZIP中
					// generateAsync
					zip.generateAsync({ type: "blob" }).then(blob => {
						//编译文件
						if (window.navigator && window.navigator.meSaveOrOpenBlob) {
							window.navigator.meSaveOrOpenBlob(blob, "backups.zip")
						} else {
							let Url = window.URL.createObjectURL(blob);
							let link = document.createElement("a");

							link.style.display = "none";
							link.href = Url;
							link.setAttribute("download", "backups.zip");
							document.body.appendChild(link);
							link.click();
						}
					});
					//编译文件完成后，进度条展示为100%100
					this.percentage = 100;
					//下载完成 可以重新点击按钮下载
					this.isDisabled = false;
				}).catch(error => {
					// Handle any errors that occurred during the request
					console.error(error);
					this.title = 'Download failed';
					this.isDisabled = false;
				});
			}
        },
	}
</script>

0