Downloader

本组件集成3种下载方式。

• 第一种：通过url下载文件
• 第二种：通过form表单下载文件
• 第三种：文件断点下载

安装

使用npm：

$ npm i rc-downloader

How to Use

• 第一种 url下载

Import:

import Downloader from 'rc-downloader' // 主文件

Downloader.downloadByUrl(url) // url为下载的文件路径

• 第二种 form表单形式下载

Import:

import Downloader from 'rc-downloader' // 主文件
const { RemoteDownload } = Downloader // 表单下载组件

Js in your script:

//开始下载设置参数
this.setState({
    downloadUrl: '',
    gotoDownload: true,
    downloadParams
})

// 下载结束后要把gotoDownload设置为false
afterDownload = () => {
    this.setState({
        gotoDownload: false
    })
}

Render in your component:

<RemoteDownload
    url={downloadUrl}                       // 下载路径
    method="get"                            // 下载方式
    gotoDownload={gotoDownload}             // 是否开始下载
    afterDownload={this.afterDownload}      // 下载后回调
    paramData={downloadParams}              // 下载文件需要的参数
/>

• 第三种 使用下载器断点下载

后台需要配合接口

Import:

import Downloader from 'rc-downloader' // 主文件

在app.js中初始化组件

Downloader.initDownloader()

添加任务

const fileObj = {
    url: '',                // 服务器端下载url 必填
    fileId: '',             // 服务器的文件id 必填
    total: 0,               // 文件总大小 必填
    id: '',                 // 任务id 非必填
    fileName: '',           // 文件名称 非必填
    date: '',               // 创建日期 非必填
    type: '',               // 文件类型 非必填
    resultUrl: '',          // 下载成功后回调 非必填
    resultParams: '',       // 下载成功后回调函数参数 非必填
}

// 调用下载组件
Downloader.addTask(fileObj)

// 显示下载组件
Downloader.show()

// 隐藏下载组件
Downloader.hide()

Keywords

react, downloader