为使用 Blob 的 <embed> 或 <iframe> 设置默认另存为名称

Question

我正在使用 PDFKit（无节点）在浏览器中生成 PDF，并通过 src 属性将其显示为 iframe 或嵌入标签。生成的 blob URL 是某种 UUID。所以整个页面看起来像：

<embed src="blob:http://localhost/eeaabb..."/>

PDF 看起来不错，但是当我在 Chrome 中单击下载链接时，默认文件名是 UUID。在 FireFox 中，它只是“document.pdf”。

如果这是服务器生成的 PDF，我将使用 Content-Disposition 和/或操作 URL，因此它的最后一部分是我想要的名称，但这对于客户端生成的对象似乎是不可能的。

我尝试过的事情：

• 通过元数据设置 PDF 标题。这有效但不影响文件名。
• 操作嵌入标签标题属性。好像什么都没做
• 更改页面标题。不影响文件。
• 尝试在数据 url 中附加一些内容。只是阻止显示 PDF。
• 通过 POST 上传 PDF，然后通过我可以控制 URL 的页面下载它。可以工作，但生成客户端 PDF 只需要将其上传到服务器似乎很疯狂。

有没有办法解决这个问题，以便我可以控制默认/建议的文件名？

Answer 1

注意：
这个答案已经过时了。
下面描述的行为自发布以来确实发生了变化，并且将来可能仍会发生变化。
由于这个问题已在其他地方提出，并且有更好的答案，因此我邀请您阅读以下内容：我可以设置 Chrome 中显示的 PDF 对象的文件名吗？

我还没有找到 chrome 的默认插件。
我有一些适用于 Firefox 的东西，但由于某些奇怪的原因，它默认在download.pdfchrome 中......

通过传递以下形式的 dataURI

'data:application/pdf;headers=filename%3D' + FILE_NAME + ';base64,...'

Firefox 接受 FILE_NAME 作为文件名，但 chrome 不...

一个plnkr在 chrome 中显示更好download.pdf，它不喜欢嵌套的 iframe...

还有一个仅适用于 FF 的片段：

'data:application/pdf;headers=filename%3D' + FILE_NAME + ';base64,...'

const FILE_NAME = 'myCoolFileName.pdf';
const file_header = ';headers=filename%3D';

fetch('https://dl.dropboxusercontent.com/s/rtktu1zwurgd43q/simplePDF.pdf?dl=0').then(r => r.blob())
.then(blob=>{
  const f = new FileReader();
  f.onload = () => myPdfViewer.src = f.result.replace(';', file_header + encodeURIComponent(FILE_NAME) + ';');
  f.readAsDataURL(blob);
  });

但请注意，如果它对您来说真的很重要，您当然可以不依赖浏览器自己的插件，而使用例如Mozilla 的 PDF.js，您将获得扩展的控制。