前端文件下载完全指南：10+种方案对比与实战代码

// 基础下载 - 触发浏览器默认行为
const link = document.createElement('a')
link.href = 'https://example.com/file.pdf'
link.click()

// 带下载文件名 - 使用download属性
const link = document.createElement('a')
link.href = 'https://example.com/file.pdf'
link.download = '自定义文件名.pdf' // 告诉浏览器触发下载
document.body.appendChild(link)
link.click()
document.body.removeChild(link)

// 注意事项：download属性有跨域限制
// 仅适用于同源URL或 blob:、data: URL

// 直接跳转下载
location.href = 'https://example.com/file.pdf'

// 优点：简单直接
// 缺点：会跳转当前页面，无法获取下载进度

// 新窗口打开下载
window.open('https://example.com/file.pdf', '_blank')

// 适用于PDF、图片等浏览器可直接预览的文件

// fetch下载文件（推荐方式）
async function downloadFile(url, filename) {
  try {
    const response = await fetch(url)
    if (!response.ok) throw new Error('下载失败')

    // 获取Blob对象
    const blob = await response.blob()

    // 创建下载链接
    const blobUrl = URL.createObjectURL(blob)

    // 创建a标签触发下载
    const link = document.createElement('a')
    link.href = blobUrl
    link.download = filename
    document.body.appendChild(link)
    link.click()

    // 清理
    document.body.removeChild(link)
    URL.revokeObjectURL(blobUrl) // 释放内存
  } catch (error) {
    console.error('下载失败:', error)
  }
}

// 使用
downloadFile('https://example.com/api/download', 'file.pdf')

import axios from 'axios'

async function downloadWithAxios(url, filename) {
  const response = await axios.get(url, {
    responseType: 'blob', // 关键：指定响应类型为blob
  })

  const blob = new Blob([response.data])
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = filename
  link.click()
  URL.revokeObjectURL(link.href)
}

// 带请求头的下载
async function downloadWithToken(url, filename) {
  const response = await axios.get(url, {
    responseType: 'blob',
    headers: {
      Authorization: `Bearer ${token}`,
    },
  })

  const blob = new Blob([response.data])
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = filename
  link.click()
}

function downloadWithProgress(url, filename, onProgress) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url, true)

    // 获取响应类型为blob
    xhr.responseType = 'blob'

    // 进度监听
    xhr.onprogress = (event) => {
      if (event.lengthComputable) {
        const percent = Math.round((event.loaded / event.total) * 100)
        onProgress && onProgress(percent)
      }
    }

    xhr.onload = () => {
      if (xhr.status === 200) {
        const blob = xhr.response
        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = filename
        link.click()
        resolve()
      } else {
        reject(new Error('下载失败'))
      }
    }

    xhr.onerror = () => reject(new Error('网络错误'))
    xhr.send()
  })
}

// 使用 - 显示进度条
downloadWithProgress(
  'https://example.com/big-file.zip',
  'big-file.zip',
  (percent) => {
    console.log(`下载进度: ${percent}%`)
    // 更新UI进度条
    document.getElementById('progress').style.width = `${percent}%`
  }
)

import axios from 'axios'

async function downloadWithAxiosProgress(url, filename) {
  const response = await axios.get(url, {
    responseType: 'blob',
    onDownloadProgress: (progressEvent) => {
      const percent = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      )
      console.log(`下载进度: ${percent}%`)
    },
  })

  const blob = new Blob([response.data])
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = filename
  link.click()
}

// Base64字符串下载
function downloadBase64(base64Data, filename, mimeType = 'image/png') {
  const link = document.createElement('a')
  link.href = base64Data
  link.download = filename
  link.click()
}

// Canvas图片下载
function downloadCanvasImage(canvasId, filename) {
  const canvas = document.getElementById(canvasId)
  // 转换为Base64
  const dataUrl = canvas.toDataURL('image/png')

  const link = document.createElement('a')
  link.href = dataUrl
  link.download = filename
  link.click()
}

// 从图片元素下载
function downloadImageElement(imgElement, filename) {
  const canvas = document.createElement('canvas')
  canvas.width = imgElement.naturalWidth
  canvas.height = imgElement.naturalHeight

  const ctx = canvas.getContext('2d')
  ctx.drawImage(imgElement, 0, 0)

  canvas.toBlob((blob) => {
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = filename
    link.click()
    URL.revokeObjectURL(link.href)
  })
}