打开“另存为” /“下载”使用JavaScript进行对话以下载即时创建的文件 [英] Open a "Save As" / "Download" dialog with JavaScript to download a file created on the fly

问题描述

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

基本上我想要的是：

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


2. 用户按下载按钮


3. JavaScript将数据发送到服务器浏览器打开下载/另存为对话框


4. 服务器基于客户端发送的数据即时生成文件 / li>
   

是否有可能？

解决方案

可能吗？

SE。举个例子：

1. 应用程序向用户显示一张表

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

 < table> 
< tr> 
< td> Foo bar< / td> 
< td> 123< / td> 
< td> 
< form action =/ download / foo / bar / 123method =post> 
< button type =submitvalue =下载foo bar 123/> 
< / form> 
< / td> 
< / tr> 
 
 ...这里还有一些表格的其他行... 
< / table> 
  

2. 推下载按钮

好的，这一点很明显。用户通过点击表格中相应的提交按钮来提交表单。

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

标准的HTML表单，它可以以纯浏览器不可知的方式向服务器提交数据，如第1点所示。如果你真的关心一些JavaScript，你总是可以订阅我所展示的< form> 的 onsubmit 更早的时候，使用javascript将所需的数据作为隐藏字段注入到DOM中。

$ b

4. 服务器根据客户端发送的数据即时生成文件
   

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

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

这里是二进制内容

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

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

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

I have a NGINX+Flask+KnockoutJS single page app and I want to create a download button that allow the user to download the data he/she is visualising and manipulating client side without reloading the full page There are a number of pure JavaScript solutions (like download.js) but none of them is fully compatible with all major browsers (e.g. Safari).

Basically what I would like to have is:

1. The app shows a table to the user
2. The user push the download button
3. JavaScript sends data to a server side endpoint
4. The server generate the file on the fly based on the data sent from the client
5. The browser open the download/save as dialog

Is it possible?

解决方案

Is it possible?

Of course. Let's have an example:

1. The app shows a table to the user

You mean, something along the lines of using a <table> tag:

<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>

2. The user push the download button

OK, this one is obvious. The user submits the form by clicking on the corresponding submit button on the desired row of your table.

3. JavaScript sends data to a server side endpoint

Why care about javascript when you have standard HTML forms which can submit data to the server in a purely browser agnostic manner, like shown in point 1.? And if you really cared about some javascript you could always subscribe to the onsubmit action of the <form> I showed earlier and inject the necessary data as hidden fields into the DOM using javascript.

4. The server generate the file on the fly based on the data sent from the client

Yeah, that's like standard HTTP protocol. The server will simply handle the /download/foo/bar/123 endpoint and simply send the file as attachment:

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

HERE COMES THE BINARY CONTENT

5. The browser open the download/save as dialog

That's exactly what any browser's gonna do when it handles the previously shown HTTP response from a server.

Conclusion: The HTTP protocol and standard HTML forms already provide you with the necessary tools to achieve your requirements. And if you wanted a little bit of additional fanciness, just enhance the HTML form upon submission using javascript in order to append any required fields as hidden input elements that you would like to send to the server. And then leave it to the browser to handle the download.

这篇关于打开“另存为” /“下载”使用JavaScript进行对话以下载即时创建的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！