首页 > 其他分享 >Vue加element Ui 实现下载文件和进度条展示

Vue加element Ui 实现下载文件和进度条展示

时间:2024-01-16 17:35:17浏览次数:36  
标签:文件 Vue 进度条 title element link blob progressEvent 下载

<template>
    <el-progress :percentage="percentage"></el-progress>
    <h1>{title}</h1>
    <el-button :disabled="isDisabled" @click="getProgress">下载文件</el-button>
</template>
<script>
  export default {
    data(){
        return {
            title:"请点击按钮进行下载。",
            percentage:0, //进度条的占比
            isDisabled:false,  //默认可以点击
        }
    },
    methods: {
      getProgress(){
        //进度条恢复为 0 
        this.percentage= 0;
        //按钮置灰 不可点击
        this.isDisabled= true;
        //发起请求
        this.$axios({
            //下载文件的远端地址。
            url:"https://文件地址.html",  
            //请求方式 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%的时候需要留一点前端编译的时间
                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
            }
            //blob返回的是一个 base64 格式的文件流
            let blob = new Blob([res],{
                //编译文件为xlsx类型。 具体可查看 blob 方法定义的类型 
               type:"application/vnd.ms-excel"  
            })
            //编译文件
            if(window.navigator && window.navigator.meSaveOrOpenBlob){
                window.navigator.meSaveOrOpenBlob(blob,"文件名称.xlsx")
            }else{
                let Url= window.URL.createObjectURL(blob);
                let link= document.createElemnet("a");

                link.style.display = "none";
                link.href = Url;
                link.setAttribute("download","文件名称.xlsx");
                document.body.appendChild(link);
                link.click();
            }
            //编译文件完成后,进度条展示为100%100
            this.percentage =100;
            //下载完成 可以重新点击按钮下载
            this.isDisabled= false;
        })
       }
    },
  };
</script>

 

标签:文件,Vue,进度条,title,element,link,blob,progressEvent,下载
From: https://www.cnblogs.com/0356dujinshuai/p/17968147

相关文章

  • vue-drawer
    <template><div><DrawerComponent/></div></template><script>importDrawerComponentfrom'./Drawer.vue'exportdefault{components:{DrawerComponent}}</script> <template><el......
  • 1. Vue3源码解析之 源码调试
    前言本系列基于Vue3.2.37版本分析,可直接前往下载。使用步骤//1、安装pnpmnpmi-gpnpm//2、安装依赖pnpmi//3、package.json修改配置末尾添加-s开启sourcemap"build":"nodescripts/build.js-s"//添加`-s`原理是在`scripts/build.js`文件下设置......
  • svg使用封装-vue
    我们在项目中经常会使用到svg,这里对svg进行封装,以方便后续的使用。1.安装svg插件npmivite-plugin-svg-icons2.在vite.config.ts中引入,用来指定svg存放位置import{createSvgIconsPlugin}from"vite-plugin-svg-icons";import{resolve}from"path";constplugin......
  • 2. Vue3源码解析之 reactive
    前言我们知道Vue3中声明响应式是通过reactive和ref这两个函数,下面我们通过案例先来看下reactive是如何实现的。案例首先引入reactive和effect两个函数,之后声明obj响应式对象,接着又执行effect函数,该函数传入了一个匿名函数,最后两秒后又修改obj.name值。<!DOC......
  • 3. Vue3源码解析之 ref
    前言我们知道Vue3中声明响应式是通过reactive和ref这两个函数,上篇我们分析了reactive的实现原理,接下来我们再来看下ref是如何实现的。案例首先引入ref和effect两个函数,之后声明name响应式数据,接着又执行effect函数,该函数传入了一个匿名函数,最后两秒后又修改......
  • 在VS Code中启动Edge浏览器调试Vue项目
    最近维护一个Vue2.x的老项目,网上的资料介绍在VS中调试前端代码都是使用Chrome浏览器,但我没有装Chrome浏览器,想在VSCode中直接调试Vue代码,百度了很多资料,尝试了好几种方案,终于找到简单可行的方法。根据微软官方的资料,如果想在VSCode中使用Edge浏览器进行调试,可以安装Microsoft......
  • vue入门——???
    上次回顾:#1ref-放在组件上---》在父组件中--》this.$refs.名字-->组件对象--->组件对象--->属性,方法就可以拿到-放在普通标签上#2this.$parent-拿到父组件对象#3props-数组形式:props:['自定义属性的名字','自定义属性的名字1']......
  • 《全局实例篇》Vue.compont注册全局组件
    注册一个全局组件语法格式如下:Vue.component(tagName,options)tagName为组件名,options为配置选项。注册后,我们可以使用以下方式来调用组件:<tagName></tagName>全局组件所有实例都能用全局组件。<divid="app"> <runoob></runoob></div><script>//注册Vue.compon......
  • 《标签篇》Vue.directives自定义指令v-my
    参考链接:https://www.runoob.com/vue2/vue-custom-directive.html自定义指令除了默认设置的核心指令(v-model和v-show),Vue也允许注册自定义指令。下面我们注册一个全局指令v-focus,该指令的功能是在页面加载时,元素获得焦点:<divid="app"> <p>页面载入时,input元素自......
  • 【vue】《 npm、pnpm和cnpm的区别及使用 》
    区别npm  NPM全称NodePackageManager,是Node.js包管理工具,是全球最大的模块生态系统,里面所有的模块都是开源免费的;也是Vue/Node.js的包管理工具,相当于Java中的Maven、Python中的PIP。  npm是Node.js官方推出的包管理工具,它是JavaScript世界中最流行的包管理工具之一。通过......