JS——fetch、axios下载文件

原创已于 2023-07-18 18:52:21 修改

· 827 阅读

0 ·

版权

文章标签：

#javascript #前端 #开发语言

于 2023-07-18 11:20:54 首次发布

该文章展示了如何使用fetchAPI和axios库来实现文件的下载功能。通过设置请求地址、方法、主体参数和文件名等接口选项，创建Promise处理网络请求，将响应转换为Blob对象，然后利用HTML的a标签模拟点击下载。两种方法都确保了文件可以被正确命名并启动下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Fetch

interface Option {
  /** 请求地址 */
  url: string
  /** 请求方式 */
  method?: string
  /** 主体参数 */
  body?: any
  /** 文件名 */
  fileName?: string
}

/* 导出文件 */
export function downloadFile(option: Option) {
  new Promise((r, j) => {
    fetch(option.url, {
      method: option.method || 'GET',
      body: JSON.stringify(option.body),
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
      }
    })
      .then(res => res.blob())
      .then(blob => {
        const blobUrl = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.download = option.fileName || Date.now().toString()
        a.href = blobUrl
        a.target = "_blank"
        document.body.appendChild(a)
        a.click()
        a.remove()
        window.URL.revokeObjectURL(blobUrl)
        r(blob)
      })
      .catch(e => j(e))
  })
}

2.axios

import axios from "axios"

interface Option {
  /** 请求地址 */
  url: string
  /** 请求方式 */
  method?: string
  /** 主体参数 */
  body?: any
  /** 文件名 */
  fileName?: string
}

/* 导出文件 */
export function downloadFile(option: Option) {
  new Promise((r, j) => {
    axios({
      url: option.url,
      method: option.method || "GET",
      data: option.body,
      responseType: "blob",
    }).then(res => {
      const { data } = res
      let url = window.URL.createObjectURL(data)
      let a = document.createElement('a')
      document.body.appendChild(a)
      a.href = url
      a.download = option.fileName || Date.now().toString()
      a.click()
      window.URL.revokeObjectURL(url)
      r(res)
    }).catch(e => j(e))
  })
}