如何在不离开页面的情况下提供文件？答案

【问题标题】：How do you serve a file without leaving the page?如何在不离开页面的情况下提供文件？
【发布时间】：2010-10-10 22:15:18
【问题描述】：

目标

我试图让用户通过单击页面上的按钮来下载文件（在本例中为 myfile.zip），无需他们离开页面 - 即浏览器必须保持在当前页面，并将他们留在可以继续使用该页面的位置，包括再次单击该按钮（如果他们希望获得文件的新副本）。

我需要它能够在所有浏览器（IE6-8、Firefox、Chrome、Opera、Safari）上工作。

背景

在 zip 中打包的是基于来自同一页面的其他交互（其中一些可能是部分完成）选择的内容（这都是通过 ajax 完成的），我不希望他们离开页面他们将丢失任何未保存的更改。

【问题讨论】：

为什么投反对票？如果您投反对票，请解释原因。
注意：这些天浏览器可能会在用户出于安全原因从同一页面启动第二次或后续下载时触发警告，以防用户被诱骗开始下载。它通过显示“停止允许此页面下载文件？”来做到这一点。警告。我在 Chrome 中注意到了这一点。不过，我对此知之甚少。一些网站滥用下载链接（通过伪装它们）来实现这一点，这很糟糕。

标签： ajax web-applications file-io

【解决方案1】：

如果您在新窗口/标签中打开链接（例如通过<a> 标签的target="_blank" 属性），它不会干扰当前窗口的内容。

target 属性是 deprecated，但得到广泛支持。根据浏览器的不同，您还可以使用 CSS3 target-name property。

如果您的目标是绝对保证主窗口不受干扰，这可能是最安全的方法，因为它可以抵御下载错误。

【讨论】：

【解决方案2】：

我相信，如果您将用户定向到一个文件，并且 MIME 类型是浏览器知道它必须下载和呈现的内容，浏览器将不会离开该页面。例如，如果您提供一个 zip 文件，浏览器会知道它是一个 zip 文件并提示下载。但是，如果您要从页面请求中提供一个 zip 文件（即 /file.aspx?file=myinfo.zip），那么 file.aspx 需要在发回响应之前将 MIME 类型更改为“application/zip”为了提示用户下载。

这里的一个主要警告是，如果文件由于某种原因不存在，用户将收到 404 并被定向到错误页面。

作为不重定向用户的可靠方法，您可以打开一个弹出窗口进行下载。

【讨论】：

【解决方案3】：

在提供下载文件时添加以下标头：

Content-disposition: attachment; filename=filename.zip

大多数浏览器会在清除当前页面之前等待查看它们正在加载的内容类型，如果是应该作为文件下载的内容，它们将不会离开当前页面（它们会显示页面前面的另存为对话框，可以关闭返回页面）。

但是，如果您发现某个浏览器确实离开了当前页面，您可以尝试将下载链接包含在一个小的 iframe 中，这样只有该框架会发生变化。

我认为在新窗口中打开链接是一个更好的解决方案，因为某些浏览器即使确定它是应该下载的文件，也会让新窗口保持打开状态，因此您最终会得到一个空白窗口。

【讨论】：

【解决方案4】：

我们通过将 ContentType 设置为“application/octet-stream”，然后使用 Response.BinaryWrite(..) 和 Response.Flush() 流式传输 zipfile，在 aspx 页面上执行此操作。

给用户一个弹出窗口“你想打开还是保存”文件。

页面仍然可用。

【讨论】：

【解决方案5】：

顺便说一下，单独指定适当的内容处置标头可能不适用于所有浏览器。具体来说，我看到它在 Opera 中不起作用，并且 IE7 显示黄色安全警告栏。

除了适当的标题，如 thomasrutter 所述，我这样做的方法是使用隐藏表单：

<form id="download_form" method="get" action=""></form>

当用户单击按钮时，您可以使用文件的 URL 来操作表单的“action”属性。

这似乎适用于所有浏览器，甚至 IE7！

【讨论】：

然后表单会被提交，还是仅仅更改操作属性会导致文件被获取？

【解决方案6】：

为避免离开页面（如果您这样做，页面会先尝试自行关闭，以确保您已保存所有内容，如果尚未保存，则会收到警告消息）或留下空白标签（我不喜欢，也不使用 depreciated target 属性）我使用了一个 iframe，它的 src 属性在 javascript 中被更改了。

这适用于除某些版本的 Opera 之外的任何地方，我认为这是可以接受的损失（我可能会通过使用其他解决方案之一以及稍后的浏览器检测来解决此问题）。

【讨论】：