使用 JavaScript 打开“另存为”/“下载”对话框以下载动态创建的文件

Question

我有一个 NGINX+Flask+KnockoutJS 单页应用程序，我想创建一个下载按钮，允许用户下载他/她正在可视化和操作客户端的数据， 而无需重新加载整个页面 有许多纯 JavaScript 解决方案（像 download.js ），但它们都不能与所有主流浏览器（例如 Safari）完全兼容。

基本上我想要的是：

1. 该应用程序向用户显示一个表格
2. 用户按下下载按钮
3. JavaScript 将数据发送到服务器端端点
4. 服务器根据客户端发送的数据动态生成文件
5. 浏览器打开下载/另存为对话框

可能吗？

原文由 raben 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

可能吗？

当然。让我们举个例子：

1. 该应用程序向用户显示一个表格

你的意思是，类似于使用 <table> 标签：

 <table>
    <tr>
        <td>Foo bar</td>
        <td>123</td>
        <td>
            <form action="/download/foo/bar/123" method="post">
                <button type="submit" value="Download foo bar 123" />
            </form>
        </td>
    </tr>

    ... here come some other rows of the table ...
</table>

1. 用户按下下载按钮

好的，这个很明显。用户通过单击表格所需行上的相应提交按钮来提交表单。

1. JavaScript 将数据发送到服务器端端点

当您拥有标准的 HTML 表单可以以完全与浏览器无关的方式向服务器提交数据时，为什么还要关心 javascript，如第 1 点所示。如果你真的关心一些 javascript，你可以随时订阅 onsubmit 操作 <form> 我之前展示过并使用 javascript 将必要的数据作为隐藏字段注入 DOM。

1. 服务器根据客户端发送的数据动态生成文件

是的，这就像标准的 HTTP 协议。服务器将简单地处理 /download/foo/bar/123 端点并简单地将文件作为附件发送：

 HTTP/1.1 200 OK
Content-Type: application/octet-stream
Content-Length: 29
Content-Disposition: attachment; filename=foobar123.bin

HERE COMES THE BINARY CONTENT

1. 浏览器打开下载/另存为对话框

这正是任何浏览器在处理先前显示的来自服务器的 HTTP 响应时要做的事情。

结论： HTTP 协议和标准 HTML 表单已经为您提供了实现您的要求所必需的工具。如果您想要一些额外的奇思妙想，只需在提交时使用 javascript 增强 HTML 表单，以便将任何必填字段附加为您想要发送到服务器的隐藏输入元素。然后交给浏览器来处理下载。

原文由 Darin Dimitrov 发布，翻译遵循 CC BY-SA 3.0 许可协议