前端基本文件下载方式记录

1. blob下载

/**
 * 使用bolb方式下载
 * @param res
 * @param filename
 * @returns
 */
export function downloadFile(res: Blob, filename: string) {
  const url = window.URL.createObjectURL(new Blob([res]))
  const a = document.createElement('a')
  a.style.display = 'none'
  a.href = url
  a.download = filename
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  window.URL.revokeObjectURL(url) // 释放blob对象
}

2. URL下载

/**
 * 使用url方式下载
 * @param url
 * @param filename
 * @returns
 */
export const urlDownload = (url, fileName = '下载文件') => {
  // 创建隐藏的可下载链接
  let eleLink = document.createElement('a')
  eleLink.download = fileName
  eleLink.style.display = 'none'
  eleLink.href = url
  // 触发点击
  document.body.appendChild(eleLink)
  eleLink.click()
  // 然后移除
  document.body.removeChild(eleLink)
}`

3. iframe下载

/**
 * 以iframe的方式实现的多文件下载
 * @param urls:array  需要下载的内容的数组列表。
 */
export const downLoadMultipleFiles = (urls) => {
  if (typeof urls !== 'object' || urls.length === 0) return
  urls.forEach(item => {
    const iframe = document.createElement('iframe')
    iframe.style.display = 'none'
    iframe.style.height = 0
    iframe.src = item
    document.body.appendChild(iframe) // 这一行必须，iframe挂载到dom树上才会发请求
    // 5分钟之后删除
    setTimeout(() => {
      iframe.remove()
    }, 5 * 60 * 1000)
  })
}