使用XMLHttpRequest 下载图片并且监听下载进度

const useDownload = () => {
   const loading = ref<boolean>(false)
   const percent = ref<number>(0)

   const imageDownloadByBlob = (url: string, name: string) => {
       loading.value = true
       return new Promise((resolve) => {
           const x = new XMLHttpRequest()
           x.open('get', url, true)
           x.responseType = 'blob'

           x.addEventListener('progress', (evt) => {
               if (evt.lengthComputable) {
                   percent.value = Number(((evt.loaded / evt.total) * 100).toFixed(0))
               }
           }, false)

           x.onload = () => {
               if (x.status === 200) {
                   saveFile(x.response, name)
                   const t = setTimeout(() => {
                       percent.value = 0
                       loading.value = false
                       clearTimeout(t)
                   }, 1000)
                   resolve(true)
               }
           }

           x.send()
       })
   }


   const saveFile = (blob: Blob, filename: string) => {
       const link = document.createElement('a')
       const body = document.querySelector('body')

       link.href = window.URL.createObjectURL(blob)
       link.download = filename

       // fix Firefox
       link.style.display = 'none'
       body?.appendChild(link)

       link.click()
       body?.removeChild(link)

       window.URL.revokeObjectURL(link.href)
   }

   return {
       loading,
       percent,
       imageDownloadByBlob,
   }
}


export {
   useDownload,
}