【JS】使用a标签下载文件方法

我们通常使用<a>标签来下载文件，可以通过设置href属性指向文件的URL，并添加download属性来告诉浏览器下载该文件而不是导航到它。

1、同源文件直接使用<a>标签加download属性即可。

2、跨域文件，如果服务器设置了Content-Disposition: attachment，那么使用<a>标签加download属性也可以直接下载。

3、如果跨域文件服务器没有设置Content-Disposition，但支持CORS，我们可以通过fetch获取文件内容，然后通过Blob URL的方式下载。

4、如果跨域文件服务器既不设置Content-Disposition也不支持CORS，那么前端无法直接通过<a>标签或JavaScript下载，可能需要服务器端代理或其它方法。

一、直接使用

1. href：指向要下载的文件的路径。可以是相对路径、绝对路径或一个完整的URL。
2. download：该属性可以指定下载后的文件名。如果不指定，则使用原始文件名。

<a href={`path/to/file`} download='自定义文件名' >下载</a>

二、动态使用

function fileDownload(url, filename) {
  // 创建隐藏的链接并触发下载
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}
fileDownload(`path/to/file`, filename)

三、接口下载

import { message } from 'antd';
export async function fetcFileDownload(api_url, api_params, fileName = '') {
  const destroy = message.loading({ content: '下载中，请稍等......', duration: 0 });
  try {
    const response = await fetch(api_url, api_params);
    const contentType = response.headers.get('content-type');

    // 检查响应类型
    if (contentType && contentType.includes('application/json')) {
      // 如果是JSON，说明可能出错了
      const errorData = await response.json();
      console.error('服务器返回错误:', errorData);
      alert(errorData.message || '下载失败');
      return;
    }

    // 正常文件下载流程
    if (!response.ok) {
      throw new Error('下载失败');
    }

    const blob = await response.blob();
    const url = window.URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  } catch (error) {
    console.error('下载失败:', error);
    message.error('下载失败，请重试');
  } finally {
    destroy();
  }
}

// 使用示例
fetcFileDownload('https://test.com/file.pdf', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
          credentials: 'include',
        },);

• fetch post 请求

const response = await fetch('/api/download', {
	method: 'POST',
	headers: {
		'Content-Type': 'application/json',
	},
    credentials: 'include',
	body: JSON.stringify({
        fileId: '123'
	})
});