在没有任何服务器请求的情况下触发文件下载 [英] Triggering a file download without any server request

问题描述

问候，

我正在开发一个基于JS的应用程序，它执行一些复杂的工作并记录一些信息（实际上可达数百行） < div> 。

我的目标是要有一个保存日志按钮来触发浏览器的下载对话框保存我的日志记录< div> 。

更简洁地说，这些是此功能的要求：

• 最终用户必须完全控制文件。他/她应该能够保存/存档以供将来参考，将其邮寄给支持部门以获得帮助以解决某些问题，将其重新加载到应用程序中等。因此，HTML5的Web Storage API在这里没有帮助（数据会保存到浏览器定义的位置，除了创建它的JS以外，不容易检索）。
  
• 应用程序必须能够脱机工作（至少在某些情况下） 。这和效率，就是为什么我放弃了将数据发布到服务器以使其返回Content-disposition标题的想法。


• 文件应正确标记为 text / plain ，所以浏览器可以建议默认操作（如在记事本中打开），就像使用普通文件下载一样。这可以被视为第一个要求的具体方面。


• 告诉用户复制粘贴< div> 放到文本编辑器中，并从那里保存它肯定是可怕的，并且正是我试图避免的原因。

我一直在这个网站上搜索，在WHATWG和W3C网站以及网络上一般都没有成功。这是可以做到的吗？

我得到的最接近的是使用 data： url。我第一次尝试执行POST操作时，无法获得内容类型，因此它会回退到UA的启发式。通过将< a> 链接样式化为一个按钮并给它一个 type 属性，但是然后UA会过于聪明地呈现内容而不是保存（并且要求用户在该步骤中从浏览器保存文件比采用复制粘贴方法更糟糕，因为在浏览器之间页面保存变化很大） 。

如果只有某种方式可以将 data： url与content-disposition提示，事情可以真正顺利。

问候，
Herenvardo

解决方案不幸的是，这不是用普通的浏览器功能可以完成的。像flash或特定于浏览器的插件将为您提供所需的内容，但JavaScript内的安全性限制不会让您下载在浏览器内创建的任意数据。

此外，所有浏览器/版本组合都不支持数据网址。我不确定您的用户是否受限于他们正在使用的浏览器，但这可能会限制您可以使用该解决方案执行的操作。

Greetings,

I'm working on a JS-based application that does some complex work and logs some information (actually, up to hundreds of lines) on a <div>.

My goal is to have a "Save log" button that triggers the browser's download dialog to save the contents of my logging <div>.

More concisely, these are the requirements for this feature:

• The final user must have full control over the file. S/he should be able to save/archive it for future reference, mail it to the support department to get help addressing some issue, load it back into the app, etc. So HTML5's Web Storage API doesn't help here (data would get saved to a browser-defined location and wouldn't be easily retrievable except from the JS that creates it).
• The application must be able to work offline (at least under some circumstances). That, and efficiency, is why I discarded the idea of POSTing the data to the server to get it back with a "Content-disposition" header.
• The file should be properly marked as text/plain, so the browser can suggest default actions (like "Open on notepad") just like with a normal file download. This can be seen as a specific aspect of the first requirement.
• Telling the user to copy-paste the content of the <div> into a text editor and saving it from there is definitely horrendous, and is exactly why I'm trying to avoid.

I have been searching on this site, on the WHATWG and W3C sites and on the web in general with no success. Is this doable at all?

The closest I have got is by using a data: url. My first attempt, performing a POST action, couldn't get a content type through, so it'd fall-back to the UA's heuristics. I got it slightly better by styling a <a> link to look like a button and giving it a type attribute, but then the UA will play too smart and render the content instead of saving (and asking the user to save the file from the browser at that step becomes even worse than taking the copy-paste approach, since page saving varies wildly between browsers).

If there were just some way to combine a data: url with a "content-disposition"-like hint, things could go really smooth.

Regards, Herenvardo

解决方案

Unfortunately this is not something you can do with normal browser capabilities. Something like flash or a browser-specific plugin will get you what you need, but security limitations within javascript will not let you download arbitrary data created within the browser.

Also the 'data' url is not supported across all browser/version combinations. I am not sure if your users are constrained on what browser they are using or not but that may limit what you can do with that solution.

这篇关于在没有任何服务器请求的情况下触发文件下载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！