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

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

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

Chrome使用blob uuid并附加pdf

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

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

firefox的更新： 我为firefox找到了一个解决方案，但它在chrome中不起作用。而不是

this._blobUrl = URL.createObjectURL(blob);

我知道

最简单的解决方案（应该也适用于IE10）是创建一个

a

元素，将其附加到body，设置其名称，让用户下载并在之后删除，类似如下：

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>

注意：


您应该编辑
onclick
函数来传递您正在处理的blob
应作为文件的输出
在示例中，我只创建了一个
pdf
，但是您可以扩展它
功能非常容易应用于您需要的任何类型的文档（并且
可由给定浏览器识别）
Chrome确实通过
navigator.plugins
字典公开了此首选项。如果此对象包含PDF阅读器，则您知道用户希望在其浏览器中看到它的显示


const opensInBrowser=[…navigator.plugins]。一些（plug=>[…plug]。一些（mime=>mime.type==='application/pdf'））
console.log（opensInBrowser）正如我在问题中已经说过的：当我添加下载属性时，文件总是被下载，当用户为指定的文件类型设置“预览”时也是如此。问题是关于设置名称和尊重用户偏好。这个问题显然不是上述问题的重复。我不需要解释。国防部应该解释为什么他认为这是一个dup。@kaido对你的第二个建议：我没有提到iframe或embed。该文件不显示（！）。它不是“另存为”操作的默认文件名。只需单击一个链接，文件就可以下载或不下载，具体取决于用户的首选项。关于您的第一个建议：同样，我不显示任何内容，也不涉及“另存为”操作。尽管如此，名为there的解决方案仍然可以工作。我得试试。仅仅因为解决方案是相同的，并不意味着问题是相同的。您的答案中没有一个是用户首选项。所以我不认为这是个骗局。@kaido实际上，如果用户在新选项卡中打开文件，我不关心文件名。事实上，你的分数也表明我不应该问这个问题，但我不认为我做错了什么。我在下载时请求帮助，这两个问题都是关于显示的。所以我在寻找它的时候什么也没找到。同样，相同的解决方案并不意味着相同的问题。我认为你对重复结束的含义有误解。不，你没有做错任何事，而且它关闭的事实上绝对没有什么错。“以重复方式关闭”是一种将具有相同问题的用户重定向到单个标志栏的方法，在该标志栏中可以收集所有答案，以便每个人都可以轻松找到它们，而不是到处都有大量帖子，无法进行比较。如果你检查一下，你会发现我的问题中有三分之一是重复的。@kaido你部分是对的。但例如，如果我能知道用户喜欢什么，我可以设置下载属性，以防用户喜欢下载而不是预览。然后我的问题的解决方案可能会有所不同。但如果你这么认为的话，我有一个Firefox的解决方案。这是铬合金的。我在编写特定于浏览器的解决方案方面没有问题，因为浏览器的行为不同。我会尽快尝试这个方法，如果它有效的话，我会把你的答案标记为正确的。这对chrome非常有效。根据
opensInBrowser
，对于chrome浏览器，我设置了下载属性。
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;

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