从flask远程服务器下载反应客户端中的文件 [英] Download file in react client from flask remote server

问题描述

我有一个从我的React客户端到我的远程Flask服务器的提取请求，如下所示：

I have a post fetch request coming from my React client to my remote Flask server like so:

fetch(FETCH_URL, {
  method: 'POST',
  body: data,
  headers: {
    'Content-Type': 'application/json'
  }
}).then((response) => {
    var a = response.body.getReader();
    a.read().then(({ done, value }) => {
        console.log(new TextDecoder("utf-8").decode(value));
      }
    );
});

response.body以ReadableStream对象的形式出现，所以我能够提取一个Uint8array然后解码为我从烧瓶服务器发回的txt文件的内容，如上面的代码所示。

response.body comes in the form of a ReadableStream object so I was able to extract a Uint8array which I then decoded to be the contents of the txt file I sent back from my flask server as shown in the code above.

此时我迷路了，我是什么我试图做的是使用文件名（在请求的数据中）向我的远程服务器发送请求，并在我的计算机上下载该文件。

At this point I'm lost, what I'm trying to do is send a request to my remote server with a filename (in the requests' data), and download that file on my computer.

如上所示，我尝试了一个获取请求到我的远程服务器，然后在烧瓶中，我的服务器找到并打开存储在服务器本身的文件，并发送备份文件。

As shown above, I tried a fetch request to my remote server, then in flask, my server finds and opens the file which is stored on the server itself, and sends back the file.

filename = request.get_json()['filename']
f = open(filename)
return f

现在的问题是，从我读过的，我无法创建文件我的电脑只是反应过来。即便如此，我不知道这是否适用于所有类型的文件或仅适用于txt文件。有没有人有任何指导来达到我从远程烧瓶服务器下载文件的最终目标。

The problem now is that from what I've read, I can't create a file on my computer just with react. Even so, I don't know if this would work with all types of files or just txt files. Does anyone have any guidance to get to my end goal of downloading a file from a remote flask server.

推荐答案

如果您的要求是创建一个包含您从响应中收到的数据的文件。以下解决方案应该有效。

If your requirement is to create a file with data you received from the response. The below solution should work.

1. 使用您收到的文本创建blob对象


2. 创建Blob该blob的对象URL


3. 使用该URL触发下载对象

因为这是纯粹的Javascript解决方案，它独立于React或您使用的任何库。

Since this is pure Javascript solution, it's independent of React or any library you use.

解决方案：

fetch(FETCH_URL, {
  method: 'POST',
  body: data,
  headers: {
    'Content-Type': 'application/json'
  }
}).then((response) => {
    var a = response.body.getReader();
    a.read().then(({ done, value }) => {
        // console.log(new TextDecoder("utf-8").decode(value));
        saveAsFile(new TextDecoder("utf-8").decode(value), 'filename');
      }
    );
});


function saveAsFile(text, filename) {
  // Step 1: Create the blob object with the text you received
  const type = 'application/text'; // modify or get it from response
  const blob = new BlobBuilder([text], {type});

  // Step 2: Create Blob Object URL for that blob
  const url = URL.createObjectURL(blob);

  // Step 3: Trigger downloading the object using that URL
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click(); // triggering it manually
}

这篇关于从flask远程服务器下载反应客户端中的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！