我可以设置在 Chrome 中显示的 PDF 对象的文件名吗？

Question

在我的 Vue 应用程序中，我收到一个 PDF 作为 blob，并希望使用浏览器的 PDF 查看器显示它。

我将它转换为一个文件，并生成一个对象 url：

 const blobFile = new File([blob], `my-file-name.pdf`, { type: 'application/pdf' })
this.invoiceUrl = window.URL.createObjectURL(blobFile)

然后我通过将该 URL 设置为对象元素的 data 属性来显示它。

 <object
  :data="invoiceUrl"
  type="application/pdf"
  width="100%"
  style="height: 100vh;">
</object>

然后浏览器使用 PDF 查看器显示 PDF。但是，在 Chrome 中，我提供的文件名（此处为 my-file-name.pdf）未被使用：我在 PDF 查看器的标题栏中看到一个散列，当我使用“右键单击”下载文件时-> 另存为…’ 或查看器的控件，它使用 blob 的哈希值（ cda675a6-10af-42f3-aa68-8795aa8c377d 或类似的）保存文件。

查看器和文件名如我希望的那样在 Firefox 中工作；只有 Chrome 没有使用文件名。

有什么方法可以使用本机 Javascript（包括 ES6，但除 Vue 外没有第三方依赖项）在 Chrome 中设置 blob / object 元素的文件名？

[编辑] 如果有帮助，响应具有以下相关标头：

 Content-Type: application/pdf; charset=utf-8
Transfer-Encoding: chunked
Content-Disposition: attachment; filename*=utf-8''Invoice%2016246.pdf;
Content-Description: File Transfer
Content-Encoding: gzip

原文由 false_azure 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Chrome 的扩展程序似乎依赖于 URI 中设置的 _资源名称_，即 file.ext 中的 protocol://domain/path/file.ext 。

因此，如果您的原始 URI 包含该文件名，最简单的方法可能是简单地将您的

Answer 2

在 Chrome 中，文件名源自 URL，因此只要您使用的是 blob URL，简短的回答就是“不，您不能设置在 Chrome 中显示的 PDF 对象的文件名。”您无法控制分配给 blob URL 的 UUID，也无法使用 object 元素将其覆盖为页面名称。可能在 PDF 中指定了一个标题，该标题将作为文档名称出现在 PDF 查看器中，但您在下载时仍会得到哈希名称。

这似乎是一种安全预防措施，但我不能肯定地说。

当然，如果您可以控制 URL，则可以通过更改 URL 轻松设置 PDF 文件名。

原文由 Old Pro 发布，翻译遵循 CC BY-SA 4.0 许可协议