前端下载文件有哪些方式

前端下载文件有哪些方式

在前端，最常见和最常用的文件下载方式是：

1. 使用 标签的 download 属性：

创建一个 标签，并设置其 href 属性为文件的 URL，然后使用 download 属性指定下载的文件名。
这种方式简单直接，适用于下载单个文件，例如图片、文档、音频或视频等。

2. window.open(imageUrl, ‘_blank’)
   window.open 方法可以在新的浏览器窗口或标签页中打开指定的 URL。通过将文件的 URL 传递给 window.open 方法，并指定第二个参数为 _blank，可以在新的标签页中打开文件，并触发浏览器的文件下载行为。

window.open 方法可能会受到浏览器的弹出窗口阻止设置的影响，因此在某些情况下，浏览器可能会阻止弹出新的标签页。此外，该方式无法自定义下载文件名或其他下载选项。

3. 使用 fetch API：
   使用 fetch 方法发送 GET 请求获取文件数据，然后使用 Response.blob() 方法将响应数据转换为 Blob 对象。
   创建一个链接或 Blob 对象，并使用 URL.createObjectURL 方法生成一个临时链接，最后模拟点击下载。
   这种方式适用于需要在下载前进行更多处理的情况，例如添加请求头、验证、处理错误等，以及需要动态生成下载内容的场景。

不同的下载方式适用于不同的场景

1. window.open 方法：

• 适用于直接在浏览器中打开文件或以新窗口或标签页的形式显示文件内容。
• 适用于非敏感、公开的文件下载，例如图片、PDF 文件等。
• 不适用于需要自定义下载文件名或其他下载选项的场景。

2. 标签的 download 属性：

• 适用于直接在浏览器中下载文件，提供了简单的方式指定下载文件的名称。
• 适用于单个文件的下载，例如图片、文档、音频或视频文件等。

3. 使用 Fetch API 和 Axios ：

• 适用于需要在前端进行更多处理的下载操作，例如在下载前需要添加请求头、验证、处理错误等。
• 适用于需要动态生成下载内容的场景，例如将多个文件合并为一个压缩文件或生成动态报表等。
• 提供更多的灵活性和控制能力，但可能需要更多的代码和处理逻辑。

Fetch API 是原生的 JavaScript API，提供了一种简单、基础的方式来发送和处理网络请求。它是现代浏览器原生支持的一种方法。

而 Axios 是一个流行的第三方库，提供了更高级、更易用的 API，用于发送 HTTP 请求。Axios 具有更多的功能和配置选项，并且能够在不同的环境中使用（包括浏览器和 Node.js）。

总结：如果只是简单地下载一个单独的文件，并且不需要进行额外的处理或自定义，那么使用 标签的 download 属性或 window.open 方法是最简单和直接的方式。如果需要更多的控制和处理能力，或者需要动态生成下载内容，那么使用 fetch API 可能更适合。

使用Axios 下载文件举例

  const handleDownload = (imageUrl: string) => {
    let token = localStorage.getItem('token');
    if (null === token) {
        token = '';
    }

    
    axios({
      url: imageUrl,
      method: 'GET',
      responseType: 'blob', // 设置响应类型为 blob
      headers: {
        Authorization: `Bearer ${token}`,  // 替换为您的 Bearer Token
      },
    })
      .then((response) => {
        const url = URL.createObjectURL(new Blob([response.data]));
  
        const link = document.createElement('a');
        link.href = url;
        link.download = 'filename.jpg'; // 设置下载的文件名
        link.click();
  
        URL.revokeObjectURL(url);
      })
      .catch((error) => {
        console.error('Error downloading file:', error);
      });
  };