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

青旅半醒 2024-03-27 11:54 96阅读 0赞

## 前言 ##

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