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))
  })
}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐