Javascript前端下载后台传来的文件流代码实例

Javascript前端下载后台传来的文件流是一个常见的 Web 开发需求，下面我将详细讲解实现它的完整攻略。

第一步：后台传递文件流

在后台开发过程中，返回文件流需要设置正确的 Content-Type 和 Content-Disposition 头部信息。下面是示例代码：

from flask import send_file, make_response

@app.route('/download/')
def download_file():
    # 读取文件流
    file_stream = get_file_stream()

    # 关闭数据库连接，释放资源

    # 返回文件流给前端
    response = make_response(send_file(file_stream, as_attachment=True, attachment_filename='file_name.txt', mimetype='text/plain'))
    response.headers["Content-Disposition"] = "attachment; filename=download.txt"
    return response

上面是一个使用 Flask 框架实现的文件下载的示例，该函数通过调用 Flask 的 send_file 和 make_response 方法，将文件以流的形式返回给前端。

第二步：前端下载并保存文件

前端使用 JavaScript 实现文件下载的过程其实就是将 fileStream 转化为可供下载的文件，这需要通过 Blob 和 a 标签的 download 属性来实现。

function downloadFile(blob) {
  // 实例化一个 Blob 类型的对象
  var newBlob = new Blob([blob], { type: "application/x-msdownload" });

  // 设置 a 标签，将 Blob 对象链接到 a 标签的 href 属性中
  var downloadUrl = window.URL.createObjectURL(newBlob);
  var anchor = document.createElement("a");
  anchor.href = downloadUrl;
  anchor.download = "download.txt";

  // 模拟点击 a 标签进行下载
  var clickEvent = document.createEvent("MouseEvent");
  anchor.dispatchEvent(clickEvent);

  // 释放对象 URL 的内存
  setTimeout(() => {
    window.URL.revokeObjectURL(downloadUrl);
  }, 100);
}

// 在点击下载按钮时，异步请求文件流，并下载文件
document.querySelector("#downloadBtn").addEventListener("click", () => {
  fetch("/api/downloadfile")
    .then((res) => res.blob())
    .then(downloadFile);
});

上面的代码通过异步请求文件流，接收到后将其转化为 Blob 类型的对象，然后通过 a 标签的 download 属性设置为可下载的文件名，实现文件下载。

示例一

比如我们要实现一个下载一张图片的功能，那么后端代码可以这样写：

@app.route('/api/download')
def download():
    f = open('1.png', 'rb')       # 读取文件流
    response = make_response(f.read())
    response.headers.set('Content-Type', 'image/png')
    response.headers.set('Content-Disposition', 'attachment', filename='download.png')
    return response

前端代码可以这样写：

fetch('/api/download')
  .then(resp => resp.blob())
  .then(blob => {
    var url = window.URL.createObjectURL(blob)
    var a = document.createElement('a')
    a.href = url
    a.download = 'download.png'
    a.click()
    window.URL.revokeObjectURL(url)
  })
  .catch(err => console.error(err))

示例二

或者我们需要下载一个 json 文件，那么后端代码可以这样写：

@app.route('/api/download')
def download():
    data = {"user": "JohnSmith", "email": "[e-mail]"}
    response = make_response(json.dumps(data))
    response.headers.set('Content-Type', 'text/plain')
    response.headers.set('Content-Disposition', 'attachment', filename='download.json')
    return response

前端代码可以这样写：

fetch('/api/download')
  .then(resp => resp.blob())
  .then(blob => {
    var url = window.URL.createObjectURL(blob)
    var a = document.createElement('a')
    a.href = url
    a.download = 'download.json'
    a.click()
    window.URL.revokeObjectURL(url)
  })
  .catch(err => console.error(err))

综上，实现 JavaScript 前端下载后端传来的文件流需要在后端设置正确的参数，前端使用 Blobs 和 a 标签的 download 属性来实现下载。我希望这篇文章能够帮到你。