在 SPA 中下载文件答案

【问题标题】：Downloading files in a SPA在 SPA 中下载文件
【发布时间】：2014-02-15 09:36:36
【问题描述】：

如何在单页应用程序中设置文件下载而不触发重新加载？

我遇到过一种情况，在服务器上生成了一个PDF文件，需要交给客户端下载。将其作为 application/octet-stream 发送在 SPA 中没有任何用处，因为files can't be sent over AJAX。

我想出的最好办法是将生成的文件保存在服务器上的临时文件夹中，将文件的 URL 发送到客户端并执行window.open(url)。问题是不同的浏览器打开文件的方式不同。例如，默认情况下，Firefox 在同一选项卡中打开 PDF，使用其PDF.js，破坏了整个 SPA 理念。但是执行window.open(url, '_blank') 经常会触发弹出窗口阻止程序等。其他文件类型可能会导致上帝知道什么...

是否有跨浏览器、安全、通用的方法在 SPA 中下载文件？

【问题讨论】：

window.open(url, '_new') 是否有同样的影响

标签： javascript single-page-application

【解决方案1】：

在 SPA 应用程序中，我不久前写了 window.location.href = '...' 并在大多数浏览器中都能正常工作，但是正在下载的页面的 contentType 和 content-disposition 标题是最大的区别。如果浏览器可以将文件识别为确实已下载的类型，那么 SPA 很可能不会在重定向时中断。还只是快速说明一下 Angular 等 SPA 框架有时允许在其标签上使用 target='_new' 和 target='_self' 而不会干扰路由等。

【讨论】：

尽管如此，它并没有消除在服务器上生成临时文件的需要，但这应该没什么大不了的。
由于浏览器插件，您可能会从浏览器中获得不一致的行为，这是一个更难克服的问题。您还可能会从浏览器处理响应标头的方式中获得不一致的行为。我认为，如果来自服务器的响应数据与生成临时文件时的响应数据完全相同，则行为应该是相同的客户端，但这不会是 SPA 框架范围内的任何内容，而是您的行为方式处理文件服务器端。
问题是，如果你做window.location.href = 'GenerateFile'，并且服务器端出现错误，没有办法处理错误而不破坏SPA。生成临时文件时，可以返回{ success: true, filepath: '...' }和{ success: false, message: '...' }之类的东西，可以正常处理。
我不确定这是否会有所帮助，但是有一个 jquery 库可以处理 http://jqueryfiledownload.apphb.com/ 的下载，具体取决于您的 SPA 框架，它可能可以在不破坏现有内容的情况下集成该库，并且可以处理服务器出现故障的场景。
谢谢，这看起来很有希望。