JavaScript实现文件下载的14种方法总结大全

作者：纸飞机时间：2026-10-31 14:57:58浏览：382

本文总结了JavaScript中实现文件下载的14种常用方法，涵盖从简单的a标签download属性到复杂的WebRTC数据通道传输。详细解析了利用fetch、XMLHttpRequest、Blob URL、iframe及第三方库（如download.js、FileSaver.js）的具体实现步骤与注意事项，帮助开发者根据场景选择最佳方案。

利用 a 标签的 download 属性：

function downloadFile(url, fileName) {
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
  link.click();
}

通过该函数，可以传入文件的 URL 和文件名作为参数。接着，创建一个 <a> 元素，将 URL 赋值给 href 属性，将文件名赋值给 download 属性，最后触发点击链接以执行文件下载操作。

结合 fetch API 与 Blob 对象：

function downloadFile(url, fileName) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = fileName;
      link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
      link.click();
    });
}

该函数利用 fetch API 获取文件的二进制数据，并将其封装为 Blob 对象。随后，创建一个临时链接，将 Blob 对象的 URL 赋值给链接的 href 属性，并设置 download 属性为文件名，最后触发点击链接完成下载。

利用 XMLHttpRequest 对象：

function downloadFile(url, fileName) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.onload = function() {
    const blob = xhr.response;
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
    link.click();
  };
  xhr.send();
}

此函数使用 XMLHttpRequest 对象发送 GET 请求以获取文件的二进制数据，并在请求完成后创建一个临时链接来执行下载操作。

选用上述任一方法，即可在 JavaScript 中实现文件下载功能。只需调用相应的下载函数，并传入文件的 URL 和文件名，即可触发下载。需注意，为确保兼容性，建议将下载操作置于用户交互的上下文中，例如在点击按钮或链接时触发，以此避免浏览器对自动下载行为的限制。

利用 window.location.href：

function downloadFile(url) {
  window.location.href = url;
}

该方法简单直接，通过 window.location.href 将浏览器重定向至文件的 URL，从而触发文件下载。不过，此方法不支持指定文件名。

利用 download.js 库：

download.js 是一个轻量级的 JavaScript 库，旨在简化文件下载流程。可通过以下步骤使用：

引入 download.js 库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/downloadjs/1.4.8/download.min.js"></script>

调用 download() 函数进行文件下载：

function downloadFile(url, fileName) {
  download(url, fileName);
}

该函数利用 download.js 提供的 download() 函数来实现文件下载。你可以传入文件的 URL 和文件名作为参数。

通过后端 API 下载文件：

若文件需经过处理或身份验证，可通过调用后端 API 实现文件下载。在后端，可根据请求参数生成文件，并将其作为响应的一部分返回给前端。前端可通过 AJAX 请求或其他适当方法调用后端 API 以完成文件下载。

需注意，对于跨域的文件下载，可能需要在服务器端进行相应配置以允许跨域下载。此外，部分浏览器对自动下载行为有限制，因此最好将下载操作置于用户交互的上下文中。

利用 HTML5 的 download 属性：

HTML5 的 a 标签提供了一个 download 属性，可直接指定文件名，从而实现文件下载。此方法无需 JavaScript 干预，只需在 a 标签中设置 href 和 download 属性即可：

<a href="path/to/file.pdf" rel="external nofollow"  download="myfile.pdf">Download</a>

用户点击该链接时，浏览器会自动下载文件，并使用指定的文件名。

利用 JavaScript 实现流式下载：

针对大型文件或需动态生成的文件，可使用 JavaScript 实现流式下载。该方法涉及将文件内容分块发送至客户端，并通过 JavaScript 逐块接收和保存文件内容。以下是一个简单示例：

function downloadFile(url) {
  fetch(url)
    .then(response => {
      const reader = response.body.getReader();
      const stream = new ReadableStream({
        start(controller) {
          function push() {
            reader.read().then(({ done, value }) => {
              if (done) {
                controller.close();
                return;
              }
              controller.enqueue(value);
              push();
            });
          }
          push();
        }
      });
      const blob = new Blob([stream], { type: response.headers.get('Content-Type') });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = 'myfile.pdf';
      link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
      link.click();
    });
}

此函数利用 fetch API 获取文件内容，并通过流式方式逐块传输文件内容，以避免一次性加载整个文件。随后，创建一个包含文件内容的 Blob 对象，并使用临时链接进行下载。

利用 FileSaver.js 库：

FileSaver.js 是一个流行的 JavaScript 库，用于在客户端保存文件。它提供了简单的 API 来保存 Blob 或 File 对象。可通过以下步骤使用：

引入 FileSaver.js 库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

调用 saveAs() 函数进行文件下载：

function downloadFile(url, fileName) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      saveAs(blob, fileName);
    });
}

该函数利用 FileSaver.js 提供的 saveAs() 函数来实现文件下载。它首先使用 fetch API 获取文件的二进制数据，并将其封装为 Blob 对象，然后调用 saveAs() 函数以触发文件下载。

利用 iframe 进行隐藏下载：

有时，你可能希望在不打开新窗口或更改当前页面的情况下下载文件。你可以创建一个隐藏的 iframe 元素，并将要下载的文件的 URL 设置为 iframe 的 src 属性。这样，文件将在后台下载。

function downloadFile(url) {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = url;
  document.body.appendChild(iframe);
}

此函数创建一个隐藏的 iframe 元素，并将 URL 分配给它。这将触发文件下载，而不会对用户界面产生任何可见变化。

利用 WebSocket 或 Server-Sent Events：

若需实时下载数据，或需根据特定事件触发文件下载，可考虑使用 WebSocket 或 Server-Sent Events (SSE)。通过与服务器建立长连接，可在特定条件满足时从服务器端接收文件数据，并在客户端进行文件下载。

利用服务端重定向：

在某些情况下，文件下载可能需要经过特定的处理或验证。可通过在服务器端生成文件，并将用户重定向至该文件的 URL 来实现文件下载。此方法需在服务器端进行相应处理并设置适当的响应头，以确保文件以附件形式下载。

利用 Blob URL：

Blob URL 是一个特殊的 URL，代表一个 Blob 对象。可将文件数据封装为 Blob 对象，并使用 createObjectURL() 方法创建 Blob URL。随后，将 Blob URL 分配给下载链接的 href 属性，从而实现文件下载。

function downloadFile(data, fileName) {
  const blob = new Blob([data]);
  const url = URL.createObjectURL(blob);
  
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
  link.click();
  
  URL.revokeObjectURL(url);
}

此函数接受文件数据和文件名作为参数，并通过 Blob URL 实现文件下载。首先，将文件数据封装为 Blob 对象，然后使用 createObjectURL() 方法创建 Blob URL。接下来，创建一个下载链接，将 Blob URL 分配给链接的 href 属性，设置文件名及其他选项，最后触发点击链接进行下载。最后，使用 revokeObjectURL() 方法释放 Blob URL 的资源。

利用 WebRTC 数据通道：

若应用程序基于 WebRTC 技术，可使用数据通道实现文件传输和下载。WebRTC 数据通道提供了点对点的实时数据传输能力，可用于将文件数据从发送方传输至接收方。可将文件数据切分为数据包，并通过数据通道逐个发送。接收方可将数据包重新组装为文件，并进行下载。

利用 WebRTC 数据通道进行文件传输和下载涉及两个角色：发送方和接收方。以下是使用 WebRTC 数据通道实现文件下载的基本步骤：

发送方：

创建一个 WebRTC 连接，并通过信令服务器与接收方建立连接。
在连接建立后，创建一个数据通道，并通过该通道发送文件数据。
将文件数据分割成较小的数据包，并通过数据通道逐个发送。
一旦所有数据包都发送完成，关闭数据通道和 WebRTC 连接。

接收方：

创建一个 WebRTC 连接，并通过信令服务器与发送方建立连接。
在连接建立后，监听连接上的数据通道事件。
当接收到数据通道的数据包时，将其保存到缓冲区中。
当接收到所有数据包后，将缓冲区中的数据组装为文件，并进行下载。
关闭数据通道和 WebRTC 连接。

以下是一个简单示例代码，展示了如何使用 WebRTC 数据通道实现文件下载：

// 创建 WebRTC 连接和数据通道
const pc = new RTCPeerConnection();
const channel = pc.createDataChannel('fileTransfer');

// 监听数据通道的开启事件
channel.onopen = () => {
  console.log('Data channel opened');
  
  // 读取文件并发送数据
  readFileAndSendData();
};

// 读取文件并发送数据
function readFileAndSendData() {
  // 读取文件数据（假设文件数据已经准备好）
  const fileData = getFileData();
  
  // 将文件数据分割成数据包
  const chunkSize = 16384; // 每个数据包的大小
  const totalChunks = Math.ceil(fileData.byteLength / chunkSize);
  
  for (let i = 0; i < totalChunks; i++) {
    const start = i * chunkSize;
    const end = Math.min(start + chunkSize, fileData.byteLength);
    const chunk = fileData.slice(start, end);
    
    // 发送数据包
    channel.send(chunk);
  }
  
  // 发送完成后关闭数据通道和连接
  channel.close();
  pc.close();
}

// 发起 WebRTC 连接并与接收方建立连接
// 这里省略了与信令服务器的交互步骤

接收方代码：

// 创建 WebRTC 连接
const pc = new RTCPeerConnection();

// 监听连接上的数据通道事件
pc.ondatachannel = event => {
  const channel = event.channel;
  
  channel.onmessage = event => {
    // 接收到数据包，保存到缓冲区
    const chunk = event.data;
    saveChunk(chunk);
  };
  
  channel.onclose = () => {
    console.log('Data channel closed');
    
    // 所有数据包接收完成后，组装文件并进行下载
    const fileData = assembleFileFromChunks();
    downloadFile(fileData);
  };
};

// 创建 WebRTC 连接并与发送方建立连接
// 这里省略了与信令服务器的交互步骤

总结

到此这篇关于JavaScript实现文件下载的14种方法的文章就介绍到这了,更多相关JS文件下载内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JS动态构建复杂嵌套JSON对象的方法

2026-11-05 15:41:52

JS负数取余为什么是负数？详解余数与模运算区别

2026-11-05 13:34:41

JS 解压出现乱码或报错怎么解决？

2026-11-05 12:32:38

JS 中 startsWith、indexOf 与正则判断字符串前缀的对比

2026-11-04 22:19:43

JS解析Excel后怎么将数据转换为JSON格式

2026-11-04 20:58:28