Chrome在线预览文件后保存时无法使用正确文件名的问题排查

Chrome对inline类型的Content-Disposition头有特殊处理逻辑：当浏览器以在线预览模式打开文件时，保存操作会直接沿用URL路径最后一段的文件名（也就是S3对象的名称4.txt），忽略Content-Disposition中指定的filename参数。这是Chrome独有的行为，其他浏览器可能会优先读取响应头里的文件名。

而当你设置Content-Disposition: attachment时，浏览器会直接触发下载流程，这时候会严格遵循响应头里的filename参数，所以能得到正确的文件名。

以下是几种可行的解决思路：

• 前端添加专门的下载按钮：在页面中提供一个下载按钮，通过JavaScript触发下载并指定文件名。示例代码：

  const downloadLink = document.createElement('a');
  downloadLink.href = 'https://dev-download.veoci.com/mapicons/4.txt';
  downloadLink.download = 'hello.txt'; // 指定目标文件名
  downloadLink.style.display = 'none';
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
  

  用户点击该按钮时，浏览器会直接使用download属性指定的文件名，不受URL路径影响。

• 通过CDN边缘函数动态修改响应头：如果使用CloudFront这类CDN，可以配置Lambda@Edge函数，在请求阶段判断操作意图：

  • 用户仅预览文件时，返回Content-Disposition: inline; filename="hello.txt"维持预览功能；
  • 检测到下载操作（比如通过特定请求头或参数）时，动态将响应头改为Content-Disposition: attachment; filename="hello.txt"，让Chrome遵循指定文件名。

• 调整S3对象Key（可选）：如果业务允许修改S3对象的存储路径/名称，直接把对象Key改成hello.txt，这样不管预览还是保存，浏览器都会使用这个文件名。若业务逻辑不允许修改对象Key，此方法不适用。

内容的提问来源于stack exchange，提问作者Dan