0.2.8 • Published 4 years ago
rc-downloader v0.2.8
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