JavaScript中下载文件的几种实现方式

在前端开发中，经常会遇到需要触发文件下载的场景，比如导出报表、下载用户上传的资源等。JavaScript提供了多种实现文件下载的方式，不同的方式适用于不同的文件来源和场景，下面逐一介绍常见的实现方法。

一、使用a标签的download属性下载

这是最简单直接的下载方式，适用于已知文件可访问URL的场景。我们可以通过动态创建<a>标签，设置href为文件地址，同时添加download属性指定下载的文件名，最后触发点击即可完成下载。

注意：这种方式受同源策略限制，如果文件地址和当前页面不同源，部分浏览器可能会直接打开文件而不是触发下载，或者download属性失效（文件名无法自定义）。

/**
 * 使用a标签download属性下载文件
 * @param {string} fileUrl - 文件的网络地址
 * @param {string} fileName - 自定义下载的文件名，包含后缀
 */
function downloadByA(fileUrl, fileName) {
  // 创建a标签元素
  const link = document.createElement('a');
  // 设置文件地址
  link.href = fileUrl;
  // 设置download属性，指定下载文件名
  link.download = fileName;
  // 将标签添加到body中
  document.body.appendChild(link);
  // 触发标签点击
  link.click();
  // 移除标签，避免残留
  document.body.removeChild(link);
}

// 调用示例，下载一个名为test.pdf的文件
// downloadByA('https://ipipp.com/static/test.pdf', '测试文件.pdf');

二、通过Blob对象处理接口返回的文件流

当文件是通过接口请求获取，接口返回的是文件流（比如后端导出Excel的场景）时，我们需要先将返回的文件流转换为Blob对象，再生成临时的URL用于下载。

这种方式可以处理接口返回的动态文件，不受文件是否预先存在的限制，同时也能很好地兼容同源和跨域场景（只要接口本身允许跨域访问）。

/**
 * 通过Blob对象下载接口返回的文件流
 * @param {string} apiUrl - 文件下载接口地址
 * @param {Object} params - 接口请求参数，可选
 * @param {string} fileName - 下载的文件名，包含后缀
 */
async function downloadByBlob(apiUrl, params, fileName) {
  try {
    // 发送请求获取文件流，注意responseType要设置为blob
    const response = await fetch(apiUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: params ? JSON.stringify(params) : null
    });
    // 将返回结果转换为Blob对象
    const blob = await response.blob();
    // 生成Blob对象的临时URL
    const fileUrl = URL.createObjectURL(blob);
    // 创建a标签触发下载
    const link = document.createElement('a');
    link.href = fileUrl;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    // 释放临时URL，避免内存泄漏
    URL.revokeObjectURL(fileUrl);
    document.body.removeChild(link);
  } catch (error) {
    console.error('文件下载失败：', error);
  }
}

// 调用示例，调用后端导出接口下载用户列表Excel
// downloadByBlob('https://ipipp.com/api/export/user-list', { page: 1, size: 100 }, '用户列表.xlsx');

三、使用FileSaver.js库简化下载逻辑

如果需要更稳定的文件保存能力，尤其是在处理复杂Blob或者需要兼容更多浏览器场景时，可以使用FileSaver.js这个第三方库。它封装了不同浏览器的兼容逻辑，使用起来更加简单。

首先需要引入FileSaver.js库，如果是通过script标签引入，可以直接使用全局的saveAs方法；如果是模块化项目，可以通过npm安装后引入。

// 假设已经通过script标签引入了FileSaver.js，或者项目内已经安装并导入

/**
 * 使用FileSaver.js下载文件
 * @param {Blob} fileBlob - 要保存的文件Blob对象
 * @param {string} fileName - 保存的文件名，包含后缀
 */
function downloadByFileSaver(fileBlob, fileName) {
  // 调用saveAs方法保存文件
  saveAs(fileBlob, fileName);
}

// 结合接口请求的使用示例
async function exportFileWithFileSaver() {
  try {
    const response = await fetch('https://ipipp.com/api/export/report', {
      method: 'POST',
      body: JSON.stringify({ year: 2024 })
    });
    const blob = await response.blob();
    // 直接调用saveAs保存文件
    saveAs(blob, '2024年度报告.pdf');
  } catch (error) {
    console.error('导出失败：', error);
  }
}

四、不同方式的适用场景

五、常见问题说明

• 如果下载的文件出现乱码，通常是后端返回的文件流编码有问题，需要和后端确认接口返回的内容类型和编码格式是否正确。
• 大文件下载时，建议添加加载提示，避免用户以为操作无响应，同时可以考虑分片下载的方式提升体验。
• 使用Blob生成临时URL后，一定要调用URL.revokeObjectURL()释放，否则会一直占用内存，尤其是在频繁下载的场景下容易造成内存泄漏。

JavaScript文件下载a标签downloadBlob对象FileSaver.js前端导出文件 本作品最后修改时间：2026-05-22 14:12:17