首页
前端开发
Javascript
JavaScript 文件下载方案

JavaScript 文件下载方案

21 次浏览 0 条评论
js
js

在 Web 开发中，使用 JavaScript 实现文件下载是一个常见的需求。将介绍几种常用的 JavaScript 文件下载方案，并探讨其优缺点以及适用场景。

基于 Blob 对象和 URL.createObjectURL()

通过创建一个 Blob 对象来存储需要下载的文件数据，然后使用 URL.createObjectURL() 方法创建一个指向该 Blob 对象的临时 URL。最后，创建一个隐藏的 标签，并将其 href 属性设置为该临时 URL，模拟用户点击下载。

function downloadFile(data, filename, mimeType) {
  const blob = new Blob([data], { type: mimeType });
  const url = URL.createObjectURL(blob);

  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', filename);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

基于 XMLHttpRequest 或 Fetch API

使用 XMLHttpRequest 或 Fetch API 发送 HTTP 请求获取文件数据，然后使用上述方法创建 Blob 对象并模拟下载。

fetch('/path/to/file')
  .then(response => response.blob())
  .then(blob => {
    // 使用上述 downloadFile 函数下载文件
  });

注意事项

  • 对于较大文件的下载，建议使用流式下载方式，避免内存溢出。
  • 跨域下载需要服务器端配合设置 CORS 策略。

js 文件大小：117.93KB