如何形成一个 http 响应，其中包含要由浏览器呈现的 html 和要下载的二进制数据？

Question

为了响应 POST 请求，我想发送一个 http 响应，其中包括要由浏览器呈现的 html 和要由浏览器下载的二进制数据。 当浏览器收到该响应时，我希望它呈现 html 并下载二进制数据。

如何形成 http 响应来实现这一点？

一些注释...

• 这个线程问了同样的问题，但提供的解决方案不是我正在寻找的，因为它只显示浏览器渲染的html中的数据。 我希望下载我发送的二进制数据，而 html 则自行渲染。

• 我从 MDN 的理解是 Safari 不支持下载浏览器 API。 由于我想为使用 Safari 的用户提供服务，因此我不认为将数据作为 javascript 中的对象作为页面的一部分发送，然后在页面上提供一个按钮来下载数据（通过调用 Downloads API 来工作）是一种选项在这里。 如果有某种浏览器 API 可以将任意对象下载到主机以响应所有当前浏览器支持的事件，请告诉我！

• 我用内容类型标记了它，因为我猜测解决方案涉及内容类型标题的某种魔法（？）

谢谢！！！

Answer 1

我有一个解决方案，我会解决这个问题...但首先我想提供一些背景信息，希望能够帮助其他人省去思考必须有更好的方法来解决促使这篇文章发表的问题的麻烦第一名，然后花时间在谷歌上搜索更好的方法，而实际上没有更好的方法。

我发布这个问题是因为（1）我有一个 API，它可以处理服务器端代码动态生成的资源请求，然后以 blob 形式返回，（2）我想为用户提供一个 Web 界面，允许然后通过单击按钮向该 API 提交请求，并让浏览器在交付后通过下载 blob 进行响应，并且 (3) API 返回的数据非常大，并且构建资源以响应 a 的服务器端代码请求比较复杂，因此用户在点击按钮和下载之间会有很大的延迟。

当然，有一种简单的方法可以让用户通过单击获取和下载 API 返回的 blob：只需在前端放置一个

<a>

 标签，其中 

href

 指向 API 端点并且存在 

download

 属性。  但在我看来，这似乎不适合我的特定情况，原因有两个：首先，单击 

<a>

 会向 API 发送 GET，但因为我想要填充的请求会触发资源的创建（而不仅仅是交付已经存在的资源），“GET”是错误的动词。  其次，由于我的情况下按钮单击和下载之间的延迟很长，因此我希望在前端对等待期间 UI 的行为进行更细粒度的控制，而不是我知道如何使用简单的 

<a>

 标签来实现。  起初，我认为处理此问题的方法是将 href 指向一个端点，该端点将通过 UI 进行响应，在等待期间通知用户，并在准备好时提供用户请求的 Blob（因此最初的问题该线程）。  但正如评论者 Kevin B 所说，同时使用 UI 和 blob 进行响应并不是 HTTP 能够做到的事情。

标准的东西是带有点击处理程序的

<button>

，该处理程序发送 POST 请求并向用户显示反馈，显示请求更改时的状态。  这听起来正是一开始所需要的......但事情是这样的：一旦响应被传递，点击处理程序应该如何让浏览器下载 blob？？？

这就是我希望为其他人节省一些时间的地方：据我所知，只有一种在收到响应后触发下载的好方法几乎适用于所有浏览器：

This，这也是解释了这里和这里。 （还有 Downloads API，但它不适用于在任何平台上运行 Safari 的用户或在 Android 上运行 Firefox 的用户）。

当我第一次看到这个解决方案时，我想“这看起来很糟糕。当然有更好的方法！”。 然后我浪费了一个小时寻找更好的方法。 这就是这篇长文的重点...此时，浏览器似乎没有提供一种简单的方法来在收到对 POST 请求的响应后触发下载。 最好的（尽管很hacky）方法是

URL.createObjectURL

，然后使用 

<a>

 属性创建一个隐藏的 

download

 标签，然后在该 

<a>

 标签上调用“点击”。