ElementUI PC端图片下载，解决高频率点击下载按钮的问题

不吹牛，吃牛肉

已于 2022-07-13 08:20:22 修改

阅读量385

点赞数 1

分类专栏： Element UI和HbuildX的相关问题总结文章标签： vue.js javascript 前端

于 2021-10-26 10:24:16 首次发布

本文链接：https://blog.csdn.net/qq_43211876/article/details/120966051

版权

Element UI和HbuildX的相关问题总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

高频率点击下载按钮，进而引起下载方法未完成再次高频率触发，导致浏览器阻塞甚至崩溃的问题

下面解决这个问题

<el-button type="primary" :loading="downloading" @click="downloadImg">下载原图</el-button>

downloadImg(){

  this.downloading = true //下载按钮的状态控制

  let x = new XMLHttpRequest();

  x.open("GET", this.downloadObj.cloud_name, true); //图片地址

  x.responseType = 'blob';

  x.onload = (e)=>{

    var url = window.URL.createObjectURL(x.response)

    var a = document.createElement('a');

    a.href = url

    a.download = ''

    a.click()

  }

  x.send();

  //监听onreadystatechange 判断返回值以改变状态（下载完成，恢复可点击状态）

  x.onreadystatechange = ()=>{

    if(x.readyState === 4){ //请求已完成，且响应已就绪

      this.downloading = false //下载状态复原

    }