前端js 实现文件（附件）下载、批量下载方法汇总

前言

文件下载在前端系统里面算是个比较常见的功能，尤其是在管理系统里面。本篇文章我记录下前端通过后端返回的文件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路径批量压缩打包下载的功能，可以参考下我的下篇博客，里面会有详细介绍！