在浏览器 DevTools 的控制台中可以模拟下载操作吗?

烟火
  • 644

这是因为今天使用了 MinIO 存储服务下载预览图片时所产生的一个疑问。

我发现在 MinIO 提供的管理界面上对图片资源选择下载和预览操作时,通过 DevTools 抓取到的网络响应都是相同的:

HTTP/1.1 200 OK
Accept-Ranges: bytes
Cache-Control: no-store
# 这是我感到比较奇怪的点
Content-Disposition: attachment; filename="41e2db7467a067a44aa60849a1d76a3c.jpg"
Content-Length: 24185
Content-Security-Policy: block-all-mixed-content
Content-Type: image/jpeg
ETag: "5c488e8aa01b8f7d815678fce8c80767"
.....

但在浏览器表现上却分别为预览(加载图片)和下载(弹出另存为对话框)。

我翻过 MDN 中关于 Content-Disposition 的响应头说明,我的理解是其值 inlineattachment 分别对应预览(加载)和下载(另存为):

在 HTTP 场景中,第一个参数或者是 inline(默认值,表示回复中的消息体会以页面的一部分或者整个页面的形式展示),或者是 attachment(意味着消息体应该被下载到本地;大多数浏览器会呈现一个“保存为”的对话框,将 filename 的值预填为下载后的文件名,假如它存在的话)。

之后我使用 DevTools 对两次请求执行了重发操作,都没能弹出另存为的对话框。

因此我产生了两个疑问:

  1. 浏览器判断下载操作(也就是弹出另存为对话框)的依据是什么?
  2. 在浏览器 DevTools 的控制台中可以模拟下载操作吗?
回复
阅读 468
1 个回答

想要浏览器自动触发下载对话框,需要以页面的形式访问返回 Content-Disposition 的链接,例如:

// 例一
location.href = 'https://example.com/demo.jpg';
// 例二
window.open('https://example.com/demo.jpg');

通过 AJAX 或是 <img src="https://example.com/demo.jpg"> 这种形式的访问并不能。


你指的模拟是指什么?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏