Fetch下载原理

最新推荐文章于 2024-08-10 08:19:05 发布

知行合一(-_-)

最新推荐文章于 2024-08-10 08:19:05 发布

阅读量660

点赞数

CC 4.0 BY-SA版权

分类专栏： ant-design-pro 文章标签： fetch下载

本文链接：https://blog.youkuaiyun.com/wobushixiaobailian/article/details/106098583

ant-design-pro 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了Fetch下载的原理，通过fetch获取文件，将其转化为Blob对象，然后利用a标签结合BlobURL触发下载。文中还给出了Ant Design Pro中download组件的实现示例，详细阐述了如何将fetch获取的ArrayBuffer数据转换为可下载的文件。

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

下载原理

在fetch中，先fetch文件，生成一个Blob，然后建立一个a标签，将连接连接到blob上，出发点击，就实现了下载。

实例

下面时ant-design-pro中download组件的实现。

export default class Download extends PureComponent {
  static propTypes = {
    action: string,
    accept: string,
    method: string,
    params: object,
    callback: func,
    beforeDownload: func,
  }

  static defaultProps = {
    action: '/sys/fileManage/downloadFile',
    accept: '*/*',
    method: 'GET',
    params: {},
    callback: () => {},
    beforeDownload: async () => {},
  }

  constructor(props) {
    super(props)
    this.state = {
      loading: false,
    }
  }

  downFile = (blob, fileName) => {
    if (window.navigator.msSaveOrOpenBlob) {
      navigator.msSaveBlob(blob, fileName)
    } else {
      const link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)
      link.download = fileName
      link.click()
      window.URL.revokeObjectURL(link.href)
    }
  }

  downloadTmpl = () => {
    const { params = {}, accept, method, action, callback } = this.props

    const headers = {
      ...(Cookies.get('token') ? { Authorization: Cookies.get('token') } : null),
      Accept: accept,
    }

    const request = extend({
      errorHandler, // 默认错误处理
      credentials: 'include', // 默认请求是否带上cookie
    })
    this.setState({
      loading: true,
    })
    return request(action, {
      method,
      headers,
      responseType: 'arrayBuffer',
      getResponse: true,
      params,
      ...(Object.keys(params).length ? { data: JSON.stringify(params) } : null),
    })
      .then(({ data, response }) => {
        if (data.code && data.code === 1000) {
          const { code, msg } = data
          const errorDesc = {
            message: `请求错误 ${code}`,
            description: msg,
          }
          notification.error(errorDesc)
          return
        }
        const contentDisposition = response.headers.get('content-disposition')
        let [fileName] = contentDisposition.split('=').slice(-1)
        fileName = fileName.replace(`utf-8''`, '')
        // const suffix = fileName.replace(/.*(\.\w+)$/i, '$1')
        // const mimes = {
        //   xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        // }
        // const blob = new Blob([data], {
        //   ...(mimes[suffix.toUpperCase()] ? { type: mimes[suffix.toUpperCase()] } : null),
        // })
        const blob = new Blob([data])
        this.downFile(blob, decodeURI(fileName))
      })
      .then(() => callback())
      .finally(() => {
        this.setState({ loading: false })
      })
  }

  start = () => {
    const { beforeDownload } = this.props
    beforeDownload()
      .then(() => this.downloadTmpl())
      .catch(e => message.error(e.message))
  }

  render() {
    const { loading } = this.state
    const { children } = this.props
    return (
      <div onClick={this.start} style={{ display: 'inline-block' }}>
        {children({ loading })}
      </div>
    )
  }
}