VUE2.0 进度条
【摘要】 <template> <!-- 每个vue文件中,只能有一个 div 根标签 --> <div> <!--下载进度条--> <el-dialog :title=this.title :visible.sync="queryParams.loadDialogStatus" :close-on-click-modal="false" :close-on-press-escape="false...
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
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)