js实现下载(文件流式)方法详解与完整实例源码

2023年5月27日上午6:47 • JavaScript

首先，需要明确一点，下载文件大多数情况下需要后端接口进行配合，前端只需要向后端发起下载请求即可。本文介绍的js实现文件下载，是通过向后端接口发起请求获取文件流，再通过js实现文件的下载。

如何下载文件

实现文件下载的方式有很多，其中一种较为简单的方式是使用a标签进行下载。例如：

<a href="http://example.com/file.pdf">下载文件</a>

但如果需要动态生成文件并下载，使用a标签就无法满足需求了。这时候可以使用js实现下载。

js下载方法详解

具体实现方式如下：

首先通过ajax请求获取后端接口返回的文件流，然后将文件流转换为Blob对象，再通过创建URL对象生成URL，使用a标签指向URL实现下载。

function downloadFile(url, filename) {
  // 发起ajax请求获取文件流
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';
  xhr.onload = function() {
    // 将文件流转换为Blob对象
    const blob = new Blob([xhr.response], {type: 'application/octet-stream'});

    // 创建URL对象生成URL
    const blobUrl = window.URL.createObjectURL(blob);

    // 创建a标签实现下载
    const a = document.createElement('a');
    a.href = blobUrl;
    a.download = filename;
    a.click();
    window.URL.revokeObjectURL(blobUrl);
  };
  xhr.send();
}

以上代码实现了下载文件的功能，通过ajax请求获取文件流并将其转换为Blob对象，再通过生成URL实现下载。需要注意的是，Blob对象支持不同的MIME类型，根据文件类型的不同，需要设置不同的MIME类型。

完整实例源码

下面给出一个完整的文件下载实例。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>文件下载示例</title>
  </head>
  <body>
    <button id="downloadBtn">下载文件</button>
    <script>
      function downloadFile(url, filename) {
        // 发起ajax请求获取文件流
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = function() {
          // 将文件流转换为Blob对象
          const blob = new Blob([xhr.response], {type: 'application/octet-stream'});

          // 创建URL对象生成URL
          const blobUrl = window.URL.createObjectURL(blob);

          // 创建a标签实现下载
          const a = document.createElement('a');
          a.href = blobUrl;
          a.download = filename;
          a.click();
          window.URL.revokeObjectURL(blobUrl);
        };
        xhr.send();
      }

      const downloadBtn = document.querySelector('#downloadBtn');
      downloadBtn.addEventListener('click', function() {
        // 调用downloadFile方法下载文件
        downloadFile('http://example.com/file.pdf', 'file.pdf');
      });
    </script>
  </body>
</html>

通过点击按钮调用downloadFile方法实现文件下载。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现下载(文件流式)方法详解与完整实例源码 - Python技术站