前言
文件下载在前端系统里面算是个比较常见的功能，尤其是在管理系统里面。本篇文章我记录下前端通过后端返回的文件url 实现文件下载的几种方法，包含批量下载。
1. 单文件下载
主要有以下三个方法：
1、通过 a 标签
<Col xs={
20} sm={
16} md={
12} lg={
8} xl={
6}>
<Form.Item name="crtTime" label="a标签下载" rules={
[{
required: false }]}>
<a href='http://dev.imuyuan.com/file/fetch/v1/5SNVT9QI6g791pHBSjLRsE'>a标签下载</a>
</Form.Item>
</Col>
该方法下载的文件名称是后端接口返回的文件本身的名称
2. 另一种下载写法
const handleDown = () => {
let a: any = document.createElement('a') // 创建一个元素
a.style = 'display: none' // 不能在页面中被看到，把他隐藏起来
a.style.height = '0px' // 给个0高度，避免影响页面布局
// a.download = `${dayjs(new Date()).format('YYYY-MM-DD')}${data.fileName}`; // 下载的文件名,可自定义
a.href = 'http://dev.imuyuan.com/file/fetch/v1/5SNVT9QI6g791pHBSjLRsE' // 文件url地址
document.body.appendChild(a) // 将其绑定在body上才能发挥作用
a.click() // 触发a标签的click事件
document.body.removeChild(a) // 删除该元素
}
<Col xs={
20} sm={
16} md={
12} lg={
8} xl={
6}>
<Form.Item name="crtTime" label="自定义名称下载" rules={
[{
required: false }]}>
<Button onClick={
handleDown}>hhh </Button>
</Form.Item>
</Col>
3. 使用 window.open 下载
const handleDown = () => {
window.open('http://dev.imuyuan.com/file/fetch/v1/2GCtdxKkrlVTSHAt00sHXJ')
// window.open('http://dev.imuyuan.com/file/fetch/v1/2GCtdxKkrlVTSHAt00sHXJ', true)
}
<Col xs={
20} sm={
16} md={
12} lg={
8} xl={
6}>
<Form.Item name="crtTime" label="window.open下载" rules={
[{
required: false }]}>
<Button onClick={
handleDown}>window.open下载</Button>
</Form.Item>
</Col>
4. 使用 location.href 下载
const handleDown = () => {
window.location.href = 'http://dev.imuyuan.com/file/fetch/v1/5SNVT9QI6g791pHBSjLRsE'
}
<Col xs={
20} sm={
16} md={
12} lg={
8} xl={
6}>
<Form.Item name="crtTime" label="location.href下载" rules={
[{
required: false }]}>
<Button onClick={
handleDown}>location.href下载</Button>
</Form.Item>
</Col>
2. 多文件批量下载
封装下两种多文件批量下载的方法
// 第一种：附件批量下载
const handleBatchDown = () => {
const hideLoading = message.loading('下载中...', 0);
const dataSource = [{
}, {
}] // 这里面是需要批量下载的文件url列表，根据自己的项目获取
dataSource.forEach((item: any) => {
let iframe = document.createElement('iframe'); // 先创建一个iframe 标签
iframe.style.display = 'none'; // 不能在页面中被看到，把他隐藏起来，不影响我们使用啊
iframe.style.height = '0px'; // 给他个0的高度，免得影响页面布局
iframe.src = item.fileUrl; // 关联上我们的下载地址
document.body.appendChild(iframe); // 把他绑定在body上才能发挥作用，不然就能孤魂野码了
setTimeout(() => {
iframe.remove();
}, 10000);
})
setTimeout(hideLoading, 0)
}
// 封装第二种方法，文件批量下载
const getFile = (url: string) => {
return new Promise(resolve, reject) => {
setTimeout(() => {
window.location.href = url;
resolve(url)
}, 1000)
}
}
const handleBatchDown = async () => {
const dataSource = [{
}, {
}] // 这里面是需要批量下载的文件url列表，根据自己的项目获取
if(!dataSource?.length) return;
for (const item of dataSource) {
await getFile(item.fileUrl)
}
}
一般情况下，常用的文件下载常见方式就这几种，不过这针对的是文件返回的url 类型，如果是在首页导出列表数据为 excel 格式的表格，可以参考下我之前的文章，里面有该类方法的封装。
注意：如果需要纯前端js通过文件url路径批量压缩打包下载的功能，可以参考下我的下篇博客，里面会有详细介绍！