我有一个 React 应用程序，它使用用 Python 和 Flask 构建的 REST 后端。我正在从数据库下载数据并通过浏览器将其保存为 CSV 文件。 我有这个工作。然而，我不明白的是为什么我必须超越我一直在阅读的资源并将东西混在一起才能让它工作。为什么我没有找到更好的概述？

有人说我所要做的就是用 mimetype 和 Content-Disposition: attachment 设置响应头；文件名=something.csv:

• In python using Flask, how can I write out an object for download?
• http://code.stephenmorley.org/php/creating-downloadable-csv-files/
• http://www.jtricks.com/bits/content_disposition.html

然而，仅此一项，仅适用于纯链接，而不适用于 fetch() 和身份验证，因此我不得不寻找节省客户端的方法数据到磁盘，例如:

• Using HTML5/Javascript to generate and save a file

所以，我的问题是:

• 为什么我必须这样做？，或者
• 我错过了什么——更简单的方法是什么？

第一个问题的答案似乎是我无法修改请求 header (以添加身份验证 token )，除非通过 XHR 类型的工作。这似乎在这里得到了回答(实际上没有回答):

• Adding custom HTTP headers using JavaScript

并且，出于某种原因，使用 Content-Disposition: attachment 对 XHR 的响应是没有意义的。真的吗？在现代浏览器中是否没有更内在的方式来管理这样的请求？

我觉得我对此了解不够，这让我很烦恼。

无论如何，如果可能的话，这是我希望简化的工作代码:

JS( react ):

// https://stackoverflow.com/a/18197511/680464
download(filename, text) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}
downloadReport(studyID) {
    fetch(`/api/admin/studies/${studyID}/csv`
    ,   {
            headers: {
                "Authorization": "Bearer " + this.props.authAPI.getToken()
            ,   "Accept": "text/csv"
            }
        }
    )
    .then(this.checkStatus.bind(this))
    .then((response) => response.text())
    .then((responseText) => this.download(`study${studyID}.csv`, responseText))
    .catch((error) => {
        console.error(this.props.location.pathname, error)
    })
}

Python( flask ):

@app.route("/api/admin/studies/<int:study_id>/csv", methods=["GET"])
@admin.login_required
def admin_get_csv(study_id):

    test = [("1","2","3"),("4","5","6")]
    def generate():
        for row in test:
            yield ",".join(row) + "\n"

    return Response(
                generate()
            ,   mimetype="text/csv"
            ,   headers={"Content-Disposition": "attachment; filename=study{0}.csv".format(study_id)}
            )

最佳答案

我被迫回到这里，因为我们刚刚遇到了 Chrome 中的 2MB 限制。谁知道？ (这个人，例如:https://craignicol.wordpress.com/2016/07/19/excellent-export-and-the-chrome-url-limit/ 在我提出问题几个月后在这里发布，我在下面实现了他的解决方案。)

无论如何，我现在将尝试回答我自己的问题，因为我还没有看到关于请求的身份验证要求的可接受答案。 (尽管如此，Conrado 确实为该要求提供了一些有用的链接。)

关于以下问题:为什么我必须这样做，没有更内在的方式吗？答案似乎分别是“仅仅因为”和“不”。不是很好的答案，我知道。我希望我能解释得更多……但如果不把脚伸到嘴里，我真的做不到。我不是网络专家，当然也不是解释它的合适人选。这就是我读到的内容。在进行身份验证时，您不能将流伪造为文件下载。

至于:我缺少什么以及更简单的方法是什么？嗯，没有更简单的方法。当然，我可以在代码库中添加更多库，例如 FileSaver.js，让它们为我隐藏部分代码。但是，我不喜欢比我真正需要的更大的工具集(我正在看着你，你这些可笑的 50MB 网站)。我可以通过在别处隐藏我的 download() 函数并导入它来完成与那些库相同的事情。不，从我的 Angular 来看，这并不容易。获取预建功能的工作可能更少，但就执行下载所需的代码量而言并不容易。对不起。

但是...我遗漏了一些东西:导致 Chrome 中 2MB 限制的那个东西。当时，我并不真正理解我使用的这个 URI 数据黑客是如何工作的。我找到了一些有效的代码，并使用了它。我现在明白了——现在我有更多时间更深入地阅读问题的那一部分。简而言之，我错过了 blob 选项与 URI 选项。当然，blob 在各种浏览器中都有其自身的局限性，但是考虑到我的用例在 2016 年不会受到任何浏览器的影响，blob 选项从一开始就是一个更好的选择......而且感觉不那么骇人听闻(并且可能仅因为这一点就有点“容易”)。

这是我目前的解决方案，它在回退到 URI 数据 hack 之前尝试 blob 保存:

JS( react ):

saveStreamCSV(filename, text) {
    this.setState({downloadingCSV: false})
    if(window.navigator.msSaveBlob) {
        // IE 10 and later, and Edge.
        var blobObject = new Blob([text], {type: 'text/csv'});
        window.navigator.msSaveBlob(blobObject, filename);
    } else {
        // Everthing else (except old IE).
        // Create a dummy anchor (with a download attribute) to click.
        var anchor = document.createElement('a');
        anchor.download = filename;
        if(window.URL.createObjectURL) {
            // Everything else new.
            var blobObject = new Blob([text], {type: 'text/csv'});
            anchor.href = window.URL.createObjectURL(blobObject);
        } else {
            // Fallback for older browsers (limited to 2MB on post-2010 Chrome).
            // Load up the data into the URI for "download."
            anchor.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(text);
        }
        // Now, click it.
        if (document.createEvent) {
            var event = document.createEvent('MouseEvents');
            event.initEvent('click', true, true);
            anchor.dispatchEvent(event);
        }
        else {
            anchor.click();
        }
    }
}
handleDownloadClick(e) {
    this.setState({downloadingCSV: true})
    fetch(`/api/admin/studies/${this.props.study.id}/csv`
    ,   {
            headers: {
                "Authorization": "Bearer " + this.props.authAPI.getToken()
            ,   "Accept": "text/csv"
            }
        }
    )
    .then((response) => response.text())
    .then((responseText) => this.saveStreamCSV(`study${this.props.study.id}.csv`, responseText))
    .catch((error) => {
        this.setState({downloadingCSV: false})
        console.error("CSV handleDownloadClick:", error)
    })
}

注意:我之所以选择这条路线，只是因为我不需要担心 FileSaver.js 的所有用例(这仅适用于管理应用程序的功能，而不是面向公众的)。

关于javascript - 使用 fetch() 从经过身份验证的 REST 下载和保存数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37095233/