文件下载 - 如何控制文件名并尊重用户的偏好？

我的网站上有一个 blob url 和一个按钮。用户可以单击该按钮，然后 Blob 将在新选项卡中打开。

<a class="downloadlink" id="downloadlink" target="_blank" href="[[_blobUrl]]"></a>

这有效。

如果用户对此 blob 后面的文件类型（例如 pdf）进行了设置来保存文件而不是在浏览器中预览它，那么当然会下载该文件。但 Firefox 创建一个随机文件名格式

[a-zA-Z0-9]{8}\.pdf

Chrome 使用 blob uuid 并附加 pdf。

如何控制文件名并尊重用户的偏好？

当我添加download属性时，文件始终会被下载，即使用户对指定文件类型设置了“预览”设置也是如此。我想要用户喜欢的行为（预览或下载），但仍然控制文件名，以防用户喜欢下载文件。

火狐浏览器更新：我得到了 Firefox 的解决方案，但它在 Chrome 中不起作用。代替

this._blobUrl = URL.createObjectURL(blob);

I do

let file = new File([blob], this.downloadname, {type: 'application/pdf'});
this._blobUrl = URL.createObjectURL(file);

Chrome 确实通过以下方式公开了此首选项navigator.plugins字典。如果此对象包含 PDF 阅读器，那么您就知道用户希望看到它显示在浏览器中。

const opensInBrowser = [...navigator.plugins].some(plug => [...plug].some(mime => mime.type === 'application/pdf'))
console.log(opensInBrowser);

但这仅适用于 Chrome。 Firefox 不会在这里公开此信息（IIRC 他们在技术上不使用插件来显示 pdf）。所以这意味着我们不能使用only这; Firefox 将始终被标记为未在浏览器中打开，尽管它很可能是这样。

所以我认为唯一的方法仍然是一个很长的方法......这里详细暴露。 https://stackoverflow.com/a/53593453/3702797.

使用 Service Worker，我们可以伪造对命名文件的请求，Chrome 将使用该请求来设置下载文件和插件读取的 pdf 的名称。

直到他们跟随 Firefox 正确转发File通过指向它们的 Blob URI 来命名对象。