从 API 下载文件

Question

I'm sending a file from a webpage to a Flask server, perform some transformations on it, and then I want to return the transformed document so that the user can download it.我正在将文件从网页发送到 Flask 服务器，对其执行一些转换，然后我想返回转换后的文档，以便用户可以下载它。 I have one button, this will send the POST request:我有一个按钮，这将发送 POST 请求：

fileUpload: function(file) {
  var formData = new FormData();
  formData.append('file',file);
  var xhr = new XMLHttpRequest();
  xhr.addEventListener("load", () => {
    console.log("asdf");
  });
  xhr.open("POST", "http://localhost:7733/receivedoc");
  xhr.send(formData);
}

Then on the server, I do the transformation and want to return a file:然后在服务器上，我进行转换并想要返回一个文件：

...
#Transformations, save file to the file system
return send_from_directory(app.config['UPLOAD_FOLDER'], filename, as_attachment=True)

However, I don't get any file downloads in my browser.但是，我的浏览器中没有任何文件下载。 There are no errors, the request seems to go through OK.没有错误，请求似乎通过 OK。 The request headers are请求标头是

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;q=0.9,en-US;q=0.8,hu;q=0.7,cs;q=0.6,sk;q=0.5,de;q=0.4
Connection: keep-alive
Content-Length: 114906
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarycEQwQtGAXe1ysM9b
DNT: 1
Host: localhost:7733
Origin: http://localhost:5000
Referer: http://localhost:5000/

And the request payload:和请求有效载荷：

------WebKitFormBoundarycEQwQtGAXe1ysM9b
Content-Disposition: form-data; name="file"; filename="response.xls"
Content-Type: application/octet-stream


------WebKitFormBoundarycEQwQtGAXe1ysM9b--

response.xls is exactly the file I'd want to download. response.xls正是我想要下载的文件。 How can I download it?我怎样才能下载它？

UPDATE - trying to implement Joost's solution.更新 - 尝试实施 Joost 的解决方案。 I do:我愿意：

@app.route('/receivedoc', methods=['POST', 'GET', 'OPTIONS'])
@crossdomain(origin='*')
def upload_file():
    if request.method == 'POST':
#TRANSFORMING FILE, then saving below:
            writer = pd.ExcelWriter(filename)
            df_output.to_excel(writer,'Pacing', index=False)
            writer.save()
            return send_from_directory(directory=app.config['UPLOAD_FOLDER'], filename=filename)

    if request.method == 'GET':
        prefixed = [filename for filename in os.listdir(app.config['UPLOAD_FOLDER']) if filename.startswith("PG PEIT")]
        filename = max(prefixed)
        print("what what")
        return render_template_string('''<!DOCTYPE html>
            <html lang="en">
            <head>
            <meta charset="utf-8">
            <title>Your file is ready</title>
            </head>
            <body>
            <form enctype="multipart/form-data" method="post" name="fileinfo">
            <input type="text" name="fname" required />
            <input type="submit" value="request the file!" />
            </form>
            <script>
            function saveBlob(blob, fileName) {
                var a = document.createElement("a");
                a.href = window.URL.createObjectURL(blob);
                a.download = fileName;
                document.body.appendChild(a); // won't work in firefox otherwise
                a.click();
            }
            var form = document.forms.namedItem("fileinfo");
            form.addEventListener('submit', function(ev) {
            var oData = new FormData(form);
            var oReq = new XMLHttpRequest();
            oReq.responseType = 'blob';
            oReq.open("POST", "{{url_for('upload_file')}}", true);
            oReq.onload = function(oEvent) {
                if (oReq.status == 200) {
                var blob = oReq.response;
                var fileName = 'response.xml'
                saveBlob(blob, fileName);
                } else {
                alert("Error " + oReq.status + " occurred")
                }
            };
            oReq.send(oData);
            ev.preventDefault();
            }, false);
            </script>
            </body>
            </html>
            ''')

This will give me a nice .html response, but the file still won't download:这会给我一个很好的 .html 响应，但文件仍然不会下载：

What did I misunderstand?我误会了什么？

Answer 1

This is mainly a javascript issue, python does not have that much to do with it.这主要是一个 javascript 问题，python 与它没有太大关系。 I had this same problem a couple of weeks ago, so I decided to make a small example of a working app.几周前我遇到了同样的问题，所以我决定制作一个工作应用程序的小例子。 The main trick is to save the data in js, make a downloadable link using the data, and making js click on it.主要技巧是将数据保存在 js 中，使用数据制作可下载的链接，然后让 js 点击它。

Fully functional example:全功能示例：

from flask import Flask, render_template_string, request, url_for, send_from_directory


app = Flask(__name__)


@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        fname = request.form['fname']
        return send_from_directory('', fname, as_attachment=True)
    return render_template_string('''<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>title</title>
</head>
<body>
<form enctype="multipart/form-data" method="post" name="fileinfo">
  <input type="text" name="fname" required />
  <input type="submit" value="request the file!" />
</form>
<script>
function saveBlob(blob, fileName) {
    var a = document.createElement("a");
    a.href = window.URL.createObjectURL(blob);
    a.download = fileName;
    document.body.appendChild(a); // won't work in firefox otherwise
    a.click();
}

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {
  var oData = new FormData(form);
  var oReq = new XMLHttpRequest();
  oReq.responseType = 'blob';
  oReq.open("POST", "{{url_for('index')}}", true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      var blob = oReq.response;
      var fileName = 'response.xml'
      saveBlob(blob, fileName);
    } else {
      alert("Error " + oReq.status + " occurred")
    }
  };
  oReq.send(oData);
  ev.preventDefault();
}, false);
</script>
</body>
</html>
''')


app.run()

从 API 下载文件

问题描述

1 个解决方案

解决方案1
0 2018-05-10 22:45:15

从 API 下载文件

问题描述

1 个解决方案

解决方案1 0 2018-05-10 22:45:15

解决方案1
0 2018-05-10 22:45:15