vue文件下载进度条

Step1：封装download方法

// 通用下载方法
export function download(url, params, filename) {let downProgress = {}let uniSign = new Date().getTime() + '' // 可能会连续点击下载多个文件，这里用时间戳来区分每一次下载的文件return axios.post(url, params, {transformRequest: [(params) => {return tansParams(params)}],headers: {'Content-Type': 'application/x-www-form-urlencoded'},responseType: 'blob',onDownloadProgress(progress) {// console.log(progress)// progress对象中的loaded表示已经下载的数量，total表示总数量，这里计算出百分比downProgress = Math.round(100 * progress.loaded / progress.total)// 将此次下载的文件名和下载进度组成对象再用vuex状态管理store.commit('downLoadProgress/SET_PROGRESS', { path: uniSign, 'progress': downProgress })}}).then((data) => {// 文件流传输完成后，开启文件下载const content = dataconst blob = new Blob([content])if ('download' in document.createElement('a')) {const elink = document.createElement('a')elink.download = filename || url.split('/')[url.split('/').length - 1]elink.style.display = 'none'elink.href = URL.createObjectURL(blob)document.body.appendChild(elink)elink.click()URL.revokeObjectURL(elink.href)document.body.removeChild(elink)} else {navigator.msSaveBlob(blob, filename)}}).catch((r) => {console.error(r)this.$message.error('该文件无法下载')})
}/*** 参数处理* @param {*} params  参数*/
export function tansParams(params) {let result = ''for (const propName of Object.keys(params)) {const value = params[propName];var part = encodeURIComponent(propName) + "=";if (value !== null && typeof (value) !== "undefined") {if (typeof value === 'object') {for (const key of Object.keys(value)) {if (value[key] !== null && typeof (value[key]) !== 'undefined') {let params = propName + '[' + key + ']';var subPart = encodeURIComponent(params) + "=";result += subPart + encodeURIComponent(value[key]) + "&";}}} else {result += part + encodeURIComponent(value) + "&";}}}return result
}

Step2：main.js中全局引入

这一步是为了方便日后调用，可以省略

import {download} from '@/utils/download'
Vue.prototype.download = download

Step3：加入Vuex，在store中添加downLoadProgress模块

1. 在store/modules下增加downLoadProgress.js文件

//downLoadProgress.js
const state = {progressList: [] // 文件下载进度列表
}const mutations = {SET_PROGRESS: (state, progressObj) => { // 修改进度列表if (state.progressList.length) { // 如果进度列表存在if (state.progressList.find(item => item.path == progressObj.path)) { // 前面说的path时间戳是唯一存在的，所以如果在进度列表中找到当前的进度对象state.progressList.find(item => item.path == progressObj.path).progress = progressObj.progress // 改变当前进度对象的progress}} else {state.progressList.push(progressObj) // 当前进度列表为空，没有下载任务，直接将该进度对象添加到进度数组内}},DEL_PROGRESS: (state, props) => {state.progressList.splice(state.progressList.findIndex(item => item.path == props), 1) // 删除进度列表中的进度对象}
}
const actions = {}
export default {namespaced: true,state,mutations,actions
}

2.在store的index.js中添加downLoadProgress模块

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import tagsView from './modules/tagsView'
import permission from './modules/permission'
import settings from './modules/settings'
import getters from './getters'
import downLoadProgress from './modules/downLoadProgress'Vue.use(Vuex)const store = new Vuex.Store({modules: {app,user,tagsView,permission,settings,downLoadProgress},getters
})export default store

Step4：在mixins文件夹下增加downloadProgress.js混入

src/mixins/downloadProgress.js

import { mapState } from 'vuex'export const downloadProgress = {name: 'downLoadProgress',computed: {...mapState({'progressList': state => state.downLoadProgress.progressList})},data() {return {notify: {} // 用来维护下载文件进度弹框对象}},watch: { // 监听进度列表progressList: {handler(n) {console.log(n)let data = JSON.parse(JSON.stringify(n))data.forEach(item => {const domList = [...document.getElementsByClassName(item.path)]if (domList.find(i => i.className == item.path)) { // 如果页面已经有该进度对象的弹框，则更新它的进度progressdomList.find(i => i.className == item.path).innerHTML = item.progress + '%'} else {if (item.progress === null) { // 此处容错处理，如果后端传输文件流报错，删除当前进度对象this.$store.commit('downLoadProgress/DEL_PROGRESS', item.path)return}// 如果页面中没有该进度对象所对应的弹框，页面新建弹框，并在notify中加入该弹框对象，属性名为该进度对象的path(上文可知path是唯一的)，属性值为$notify(element ui中的通知组件)弹框对象this.notify[item.path] = this.$notify.success({// title: 'Info',dangerouslyUseHTMLString: true,message: `<p style="width: 100px;">正在下载<span class="${item.path}" style="float: right">${item.progress}%</span></p>`, // 显示下载百分比，类名为进度对象的path(便于后面更新进度百分比)showClose: false,duration: 0})}console.log(item.progress + '%', '-------------------------->')if (item.progress == 100) { // 如果下载进度到了100%，关闭该弹框，并删除notify中维护的弹框对象this.notify[item.path].close()// delete this.notify[item.path] 上面的close()事件是异步的，这里直接删除会报错，利用setTimeout，将该操作加入异步队列setTimeout(() => {delete this.notify[item.path]}, 1000)this.$store.commit('downLoadProgress/DEL_PROGRESS', item.path)// 删除downLoadProgress中state的progressList中的进度对象}})},deep: true}}
}

Step5: 页面调用

1. 在需要下载的页面引入downloadProgress.js

import {downloadProgress} from '@/mixins/downloadProgress.js'
export default {name: 'mcu',mixins:[downloadProgress],data() {return {}}...
}

2. 调用方法

downloadFile() {let url = '***/***';this.download(url, '', '下载进度测试');
}

页面效果

vue文件下载进度条相关推荐

Android中下载进度条格式,Android开发如何实现文件下载进度条
释放双眼,带上耳机,听听看~! 今天和小编狗在这里学习下载进度的实现吧,这段代码是网上找的,自己做了些小改,通过模拟器测试.文件下载进度条控制(就是为了高清壁纸加个进度条),自己研究了好久,但是进度条 ...
vue中进度条写法_vue组件实现进度条效果
这篇文章主要为大家详细介绍了vue组件实现进度条效果,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 本文实例为大家分享了vue实现进度条效果的具 ...
如何实现文件下载进度条呢？
比如有时候我们在利用python下载文件的时候,通常情况下,文件下载过程我们是感知不到的,只有等文件下载完成,我们才能知道,该文件已经下载完成,假如此时下载文件很大,下载时间就会比较漫长,如果这时候有 ...
vue 环形进度条组件封装
子组件circle: <template><div :style="svgStyle"><svg :style="svgStyle" ...
Python展示文件下载进度条
Python展示文件下载进度条前言 requests 思考只需要安装一个库即可大家好!我是晨晨
vue aplayer 进度条无法拖动_为 Vue 的惰性加载加一个进度条
// 每日前端夜话第412篇// 正文共:1800 字// 预计阅读时间:8 分钟简介通常用 Vue.js 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 ...
android 下载进度条代码实现,Android 文件下载进度条的实现
Android 中很多地方都需要用到线程下载.下面我谢了个简单的下载图片的demo.望对你们有到帮助. 首先,配置权限, 在 AndroidManifest.xml里面的application节点下面 ...
vue实现进度条隐藏_Vue 中使用 NProgress 实现进度条
简介:NProgress 是浏览器加载时,出现在浏览器顶部的进度条. 文章目录: 一.NProgress 安装二.NProgress 使用三.NProgress 配置四.Vue 中修改进度条颜色 ...
vue aplayer 进度条无法拖动_Vue-rideo-player视频播放插件的使用
***** git项目地址: https://github.com/surmon-china/vue-video-player ***** 参考文章: https://www.jianshu.com/ ...

vue文件下载进度条

Step1：封装download方法

Step2：main.js中全局引入

Step3：加入Vuex，在store中添加downLoadProgress模块

1. 在store/modules下增加downLoadProgress.js文件

2.在store的index.js中添加downLoadProgress模块

Step4：在mixins文件夹下增加downloadProgress.js混入

Step5: 页面调用

1. 在需要下载的页面引入downloadProgress.js

2. 调用方法

页面效果

vue文件下载进度条相关推荐

最新文章

热门文章