用于下载 Python3 Flask 生成的 Zip 文件的 Javascript 按钮

Question

我在 Ubuntu 18.04 上使用 Python 3.7 生成一个 ZipFile，并使用 Flask 1.0.2 提供它。我知道 Flask 代码有效，因为我可以在浏览器中显式键入端点并获得可以在 Windows 10 上解压缩的有效 ZipFile。我现在正试图让我的 Javascript 代码通过单击按钮下载 ZipFile。问题是生成的文件被 Windows 声明为“损坏”并且无法解压缩。如何让 Javascript 正确下载文件？

Flask 代码如下所示：

@app.route("/get_new_training_data", methods=["GET"])
def create_and_serve_training_data_zipfile():

    # Define the location of the new training data
    newDataLocation = "%s" % (configuration.NEW_TRAINING_DATA_LOCATION)

    # Ensure it exists or throw and error
    if os.path.isdir(newDataLocation):

        print("[%s] Creating new ZipFile for download from: %s" % (os.path.basename(__file__), newDataLocation))

        # Create a zipfile in memory and send it back to the user
        # The zipfile will contain the training data collected through
        # the webbrowser button controls
        try:

            memoryFile = BytesIO()
            with zipfile.ZipFile(memoryFile, 'w', zipfile.ZIP_DEFLATED) as zf:
                for root, dirs, files in os.walk(newDataLocation):
                    for file in files:
                        print("[%s] Adding file to ZipFile: %s" % (os.path.basename(__file__), file))
                        zf.write(os.path.join(root, file))
            memoryFile.seek(0)
            return send_file(memoryFile, mimetype='application/zip', attachment_filename='ImageData.zip', as_attachment=True)

        except Exception as err:

            newStatus = {"download_image_data": "Failed: Error Could not create Zipfile: %s"%(err)}

            print("[%s] Error downloading new Training Data - JSON Response is: %s" % (
            os.path.basename(__file__), newStatus))

            return jsonify(newStatus), 500

    else:

        newStatus = {"download_image_data": "Failed: Error Training Data directory does not exist"}

        print("[%s] Error downloading new Training Data - JSON Response is: %s" % (os.path.basename(__file__), newStatus))

        return jsonify(newStatus), 500

Javascript 代码在这里：

// Add an on click for the download data button
var downloadTrainingDataButton = document.getElementById("downloadTrainingData");
downloadTrainingDataButton.onclick = function() {

    console.log("Downloading New Training Data ...");

    // Do a web request to download a zip file of the training data
    var logRequestXmlHttp = new XMLHttpRequest();
    logRequestXmlHttp.open( "GET", "http://{{host_ip}}/get_new_training_data", true ); // false for synchronous request
    logRequestXmlHttp.onload = function(e) {
        code = logRequestXmlHttp.response;

        if (logRequestXmlHttp.status == 200) {

            var blob = new Blob([this.response], {type: "application/zip"});
            var url = window.URL.createObjectURL(blob);
            var link = document.createElement('a');
            document.body.appendChild(link);
            link.style = "display: none";
            link.href = url;
            link.download = "ImageData.zip";
            link.click();

            setTimeout(() => {
            window.URL.revokeObjectURL(url);
            link.remove(); } , 100);

            console.log("Success downloading zip file");

        }

    };
    logRequestXmlHttp.onerror = function () {
        console.log("Error with downloading zip file: " + logRequestXmlHttp.responseText + " Code: " + code);
    };
    logRequestXmlHttp.send( null );

}

谢谢。

Answer 1

要下载文件，您可以使用锚标记上的HTML5 download attribute 让它知道它需要下载资源而不是导航到它。这可能是实现您想要的最简单的方法。

例如：

<a href="http://{{host_ip}}/get_new_training_data" download="training_data.zip">Download Training Data</a>