caimei-authentic-www/utils/donwload-tools.js

import SimpleProgress from '@/components/SimpleProgress'
import handleClipboard from '@/utils/clipboard'
import { isWeChat } from '@/utils/validator'

let uuid = 0 // 进度条id

export async function downloadWithUrl(downUrl, fileName, self) {
  const h = self.$createElement
  let progressRef, tiemer

  const notification = self.$notify({
    title: '提示',
    message: h('div', {}, [
      h('div', {}, `正在下载${fileName}，请勿重复操作！`),
      h(SimpleProgress, { ref: `progress${uuid}` }),
    ]),
    duration: 0,
  })

  self.$nextTick(() => {
    progressRef = self.$refs[`progress${uuid}`]
    tiemer = setInterval(() => {
      if (progressRef.percentage < 90) {
        progressRef.percentage += 2
      } else {
        clearInterval(tiemer)
      }
    }, 500)
  })

  try {
    const data = await fetch(downUrl)
    const res = await data.blob()
    const link = document.createElement('a')
    const url = URL.createObjectURL(res)
    link.href = url
    link.download = fileName
    link.click()
    console.log(url)
    URL.revokeObjectURL(url)
  } catch (err) {
    self.$message.error(`下载${fileName}失败`)
  } finally {
    clearInterval(tiemer)
    progressRef.percentage = 100
    notification && notification.close()
  }
}

// 通过链接下载
export default function downloadFile(downUrl, fileName, self, $event) {
  if (isWeChat()) {
    return handleClipboard(
      downUrl,
      $event,
      '下载链接已复制到剪切板，请粘贴到浏览器中下载'
    )
  } else {
    downloadWithUrl(downUrl, fileName, self)
  }
}