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

Question

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

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

PDF 显示正常，但是当我在 Chrome 中单击下载 link 时，默认文件名是 UUID。在 FireFox 中，它只是 "document.pdf"。

如果这是一个 server-generated PDF，我会使用 Content-Disposition and/or 操纵 URL 所以它的最后一部分是我想要的名字，但那不是client-generated object.

似乎是可能的

我尝试过的事情：

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

有什么办法可以控制 default/suggested 文件名吗？

Answer 1

Is there any way around this so that I can control the name?

没有。您无法控制存储在用户本地文件系统中的文件的名称。

您可以使用 <a> 元素并将 download 属性设置为建议的文件名。如果用户选择下载提供的文件，用户可以在下载文件之前或之后随时更改文件名。

window.onload = () => {
  let blob = new Blob(["file"], {
    type: "text/plain"
  });
  let url = URL.createObjectURL(blob);
  let a = document.createElement("a");
  a.href = url;
  a.download = "file.txt";
  document.body.appendChild(a);
  console.log(url);
  a.click();
}

在 chrome，chromium 浏览器可以使用 requestFileSystem 将 Blob、File 或 Directory 存储在 LocalFileSystem，这样写文件到浏览器配置目录，或用户操作系统中的其他目录。参见

How to Write in file (user directory) using JavaScript?

Answer 2

注：
此答案已过时。
下面描述的行为自发布以来确实发生了变化，并且将来可能仍会发生变化。
由于这个问题已经在其他地方被问到，并且有更好的回答，我邀请你改为阅读这些：

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

通过传递

形式的 dataURI

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

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

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

还有一段只能在 FF 中使用的片段：

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);
  });

<iframe id="myPdfViewer" width="500" height="500"></iframe>

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

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

Set the default save as name for a an <embed> or <iframe> that uses a Blob

javascript

html

pdf

node-pdfkit