Question

我的网站上有一个Blob网址和一个按钮。用户可以单击该按钮，然后在新标签页中打开该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更新： 我有一个针对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.。

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

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

Answer 2

最简单的解决方案（也应与IE10一起使用）是创建一个a元素，将其附加到正文，设置其名称，然后让用户下载并删除，如下所示：

function save(){
  const file = new File(['this is where BLOB should go'], {type: 'application/pdf'}); // edit this line to have access to source blob
  const link = document.createElement('a');

  link.href = URL.createObjectURL(file);
  link.download = 'this is the name.pdf';

  document.body.appendChild(link);
  link.click();

  document.body.removeChild(link);
}

window.save = save;

，对于HTML：

<a class="downloadlink" id="downloadlink" target="_blank" onclick='save()'>here is your link</a>

工作示例可以找到here

注意：

您应该编辑onclick函数以传递您所访问的Blob 期望作为文件的输出
在示例中，我仅创建了pdf，但是您可以扩展它功能非常容易，可满足您需要的任何类型的文档（并且可以通过给定的浏览器识别）

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

2 个答案: