登录
首页 >  文章 >  前端

前端实现文件下载，手把手教你三种JS超简单方法！

时间：2025-06-18 23:01:55 448浏览 收藏

前端实现文件下载是Web开发中常见的需求。本文将手把手教你3种主流的JS方法，轻松搞定文件下载功能！第一种方法最简单，利用``标签的`download`属性，适用于同源文件下载，但受限于跨域问题。第二种方法通过`window.location.href`触发下载，原理类似，同样受同源策略限制。第三种方法则更为强大和灵活，使用Blob对象和URL.createObjectURL，通过fetch获取文件数据并转为Blob对象，再创建临时URL实现下载，它支持跨域下载，并允许自定义请求头和控制下载进度。此外，文章还深入探讨了大文件下载的优化策略，包括显示下载进度、断点续传以及使用Web Workers避免阻塞主线程，并提供了处理下载失败情况的实用技巧，如错误捕获、HTTP状态码检查和重试机制，助你打造更稳定、更友好的文件下载体验。

1.最简单的方法是使用标签+download属性，直接设置href和download属性即可，适用于同源文件下载；2.通过window.location.href利用JavaScript触发下载，原理与第一种方法相同，但同样受限于同源策略；3.使用Blob对象和URL.createObjectURL，通过fetch获取文件数据并转为Blob对象，再创建临时URL实现下载，支持跨域、可自定义请求头及控制下载进度。针对大文件下载优化用户体验可通过监听onprogress事件显示下载进度、添加Range请求头实现断点续传、使用Web Workers将下载任务移至后台线程避免阻塞主线程。处理下载失败情况包括：捕获fetch错误、检查HTTP状态码、设置重试机制提高成功率、记录错误日志便于排查问题。

js如何实现文件下载功能 前端文件下载的3种实现方法！

前端文件下载，简单来说，就是让用户点击一个按钮或者链接，浏览器就能自动下载一个文件到本地。这事儿听起来简单，但实现起来还是有几种不同的路子。

js如何实现文件下载功能 前端文件下载的3种实现方法！

直接输出解决方案即可

js如何实现文件下载功能 前端文件下载的3种实现方法！

  1. 最简单的： 标签 + download 属性

    js如何实现文件下载功能 前端文件下载的3种实现方法！

    这是最直接，也是最常用的方法。你只需要一个标签，然后设置href属性为文件的URL，再加一个download属性，指定下载的文件名就行了。

    下载PDF

    这种方法的好处是简单粗暴，浏览器原生支持，兼容性好。但缺点也很明显，它只能下载同源的文件，如果文件在不同的域名下，浏览器会阻止下载，除非服务器允许跨域。而且，这种方式无法控制下载进度，也无法自定义请求头。

  2. 利用 window.location.href

    这种方法其实跟第一种类似，只不过是通过JavaScript来触发下载。

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

// 调用
downloadFile('path/to/your/file.pdf');

    它的优缺点和第一种方法基本一样，也是简单方便，但受限于同源策略，无法控制下载过程。

  3. 使用 Blob 对象和 URL.createObjectURL

    这种方法是目前最灵活，也是最常用的方法。它可以下载任何文件，无论是否同源，而且可以自定义请求头，控制下载进度。

    function downloadFile(url, filename) {
  fetch(url, {
    method: 'GET',
    // 可以添加自定义请求头
    headers: {
      'Authorization': 'Bearer your_token'
    }
  })
  .then(res => res.blob())
  .then(blob => {
    const a = document.createElement('a');
    const url = URL.createObjectURL(blob);
    a.href = url;
    a.download = filename; // 自定义文件名
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url); // 释放URL对象
  });
}

// 调用
downloadFile('path/to/your/file.pdf', '自定义文件名.pdf');

    这种方法的核心在于：

    • fetch：发起网络请求，获取文件数据。可以设置自定义请求头，比如Authorization，用于身份验证。
    • blob()：将响应数据转换为 Blob 对象。Blob 对象表示一个不可变的、原始数据的类文件对象。
    • URL.createObjectURL(blob)：创建一个指向 Blob 对象的URL。这个URL可以被标签使用。
    • URL.revokeObjectURL(url)：释放URL对象，防止内存泄漏。

    这种方法的优点是：

    缺点是：

前端下载文件，这三种方法各有千秋，具体选择哪种，取决于你的实际需求。 如果只是简单下载同源文件，标签 + download 属性足够了。 如果需要下载不同源的文件，或者需要自定义请求头，那么 Blob 对象和 URL.createObjectURL 是更好的选择。

下载大文件时如何优化用户体验？

下载大文件，最怕的就是用户傻等，不知道下载进度。所以，优化用户体验的关键在于：

  1. 显示下载进度：

    使用 Blob 对象和 URL.createObjectURL 方法时，可以通过监听 fetch 的 onprogress 事件来获取下载进度。

    fetch(url, {
  method: 'GET'
})
.then(res => {
  const contentLength = res.headers.get('content-length');
  let receivedLength = 0;
  const reader = res.body.getReader();

  return new ReadableStream({
    start(controller) {
      function push() {
        reader.read().then(({ done, value }) => {
          if (done) {
            controller.close();
            return;
          }
          receivedLength += value.length;
          // 计算下载进度
          const progress = (receivedLength / contentLength * 100).toFixed(2);
          console.log(`下载进度：${progress}%`);
          // 更新UI显示下载进度
          updateProgressUI(progress);

          controller.enqueue(value);
          push();
        });
      }
      push();
    }
  })
  .pipeTo(new WritableStream({
    write(chunk) {
      // 这里可以处理下载的数据，比如写入文件
    }
  }))
  .then(() => {
    console.log('下载完成');
  });
});

function updateProgressUI(progress) {
  // 更新UI显示下载进度，比如更新进度条
  document.getElementById('progress-bar').style.width = `${progress}%`;
}

    这段代码的关键在于使用 ReadableStream 来读取响应数据，并在读取过程中计算下载进度，然后更新UI显示。

  2. 断点续传：

    如果文件非常大，可以考虑支持断点续传。断点续传的原理是在请求头中添加 Range 字段，告诉服务器从哪个位置开始传输数据。

    function downloadFileWithResume(url, filename, start) {
  fetch(url, {
    method: 'GET',
    headers: {
      'Range': `bytes=${start}-`
    }
  })
  .then(res => res.blob())
  .then(blob => {
    // ... 后续处理与之前相同
  });
}

    服务器也需要支持 Range 请求头，并返回 206 Partial Content 状态码。

  3. 使用 Web Workers：

    下载大文件可能会阻塞主线程，导致页面卡顿。可以使用 Web Workers 将下载任务放在后台线程中执行，避免阻塞主线程。

    // 主线程
const worker = new Worker('download-worker.js');
worker.postMessage({ url: 'path/to/your/file.pdf', filename: '自定义文件名.pdf' });

worker.onmessage = function(event) {
  const data = event.data;
  if (data.progress) {
    // 更新UI显示下载进度
    updateProgressUI(data.progress);
  } else if (data.complete) {
    console.log('下载完成');
  }
};

// download-worker.js
self.addEventListener('message', function(event) {
  const { url, filename } = event.data;
  downloadFile(url, filename, function(progress) {
    self.postMessage({ progress: progress });
  }, function() {
    self.postMessage({ complete: true });
  });
});

function downloadFile(url, filename, progressCallback, completeCallback) {
  // ... 下载文件的代码，并在下载过程中调用 progressCallback 更新进度
  // 下载完成后调用 completeCallback
}

    这种方法将下载任务放在后台线程中执行，避免阻塞主线程，提高页面响应速度。

如何处理下载失败的情况？

下载文件，难免会遇到各种各样的问题，比如网络中断、服务器错误等等。所以，我们需要处理下载失败的情况，给用户一个友好的提示。

  1. 监听 fetch 的错误：

    fetch 函数会返回一个 Promise 对象，如果请求失败，Promise 对象会 reject。我们可以使用 catch 方法来捕获错误。

    fetch(url, {
  method: 'GET'
})
.then(res => res.blob())
.then(blob => {
  // ... 下载成功的处理
})
.catch(error => {
  console.error('下载失败：', error);
  // 显示错误提示
  alert('下载失败，请稍后重试');
});

  2. 检查 HTTP 状态码：

    如果服务器返回的 HTTP 状态码不是 200，也表示下载失败。我们可以检查 response.ok 属性来判断请求是否成功。

    fetch(url, {
  method: 'GET'
})
.then(res => {
  if (!res.ok) {
    throw new Error(`HTTP 错误：${res.status}`);
  }
  return res.blob();
})
.then(blob => {
  // ... 下载成功的处理
})
.catch(error => {
  console.error('下载失败：', error);
  // 显示错误提示
  alert('下载失败，请稍后重试');
});

  3. 重试下载：

    如果下载失败，可以尝试重新下载。可以设置一个重试次数，如果超过重试次数仍然失败，就放弃下载。

    function downloadFileWithRetry(url, filename, retryCount = 3) {
  fetch(url, {
    method: 'GET'
  })
  .then(res => {
    if (!res.ok) {
      throw new Error(`HTTP 错误：${res.status}`);
    }
    return res.blob();
  })
  .then(blob => {
    // ... 下载成功的处理
  })
  .catch(error => {
    console.error('下载失败：', error);
    if (retryCount > 0) {
      console.log(`尝试重新下载，剩余次数：${retryCount}`);
      // 延迟一段时间后重新下载
      setTimeout(() => {
        downloadFileWithRetry(url, filename, retryCount - 1);
      }, 1000);
    } else {
      // 显示错误提示
      alert('下载失败，请稍后重试');
    }
  });
}

    这种方法在下载失败后，会尝试重新下载，提高下载成功率。

  4. 记录错误日志：

    为了方便排查问题，可以将下载失败的错误信息记录到日志中。可以使用 console.error 或者第三方的日志库来记录错误信息。

    fetch(url, {
  method: 'GET'
})
.then(res => res.blob())
.then(blob => {
  // ... 下载成功的处理
})
.catch(error => {
  console.error('下载失败：', error);
  // 记录错误日志
  logError('下载文件失败', { url: url, error: error.message });
  // 显示错误提示
  alert('下载失败，请稍后重试');
});

function logError(message, data) {
  // 将错误信息发送到服务器或者记录到本地
  console.log(message, data);
}

    通过记录错误日志，可以方便地排查问题，提高代码质量。

以上就是《前端实现文件下载，手把手教你三种JS超简单方法！》的详细内容，更多关于文件下载,Fetch,blob,WebWorkers,URL.createObjectURL的资料请关注golang学习网公众号！

文件下载 Fetch blob WebWorkers URL.createObjectURL
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>