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

Question

我的站点上有一个 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。

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

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

Firefox 更新: 我有一个适用于 firefox 的解决方案，但它不适用于 chrome。而不是

this._blobUrl = URL.createObjectURL(blob);

我愿意

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

Answer 1

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

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

但这只适用于 Chrome。 Firefox 不会在此处公开此信息(IIRC 他们在技术上不使用插件来显示 pdf)。所以这意味着我们不能只使用这个； Firefox 将始终标记为未在浏览器中打开，虽然它很可能是。

所以我认为唯一的方法还是很长... exposed in details here. .

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

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