为 <embed> 设置默认的另存为名称.或&lt;iframe&gt;使用 Blob [英] Set the default save as name for a an &lt;embed&gt; or &lt;iframe&gt; that uses a Blob

问题描述

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

I am generating a PDF in the browser using PDFKit (without node) and displaying it an iframe or an embed tag via the src attribute. The generated blob URL is some kind of UUID. So the overall page looks like:

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

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

The PDF appears fine, but when I click the Download link in Chrome, the default file name is the UUID. In FireFox, it is just "document.pdf".

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

If this were a server-generated PDF I would use Content-Disposition and/or manipulate the URL so the last part of it is the name I want, but that doesn't seem possible with a client-generated object.

我尝试过的事情:

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

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

Is there any way around this so that I can control the default/suggested file name?

推荐答案

---

---

注意:
这个答案已经过时了.
以下描述的行为自发布以来确实发生了变化，并且将来可能仍会发生变化.
由于这个问题已经在其他地方问过，得到了更好的回答，我邀请你阅读这些:我可以设置 Chrome 中显示的 PDF 对象的文件名吗?

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

I didn't find, yet, for chrome's default plugin.
I've got something that works for Firefox though, and which will default to download.pdf in chrome, for some odd reason...

通过以

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

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

Firefox accepts FILE_NAME as the name of your file, but chrome doesn't...

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

A plnkr to show a better download.pdf in chrome, which doesn't like nested iframes...

还有一个仅适用于 FF 的代码段:

And an snippet which will only work in 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 的 PDF.js，您将获得扩展控制.

But note that if it is really important to you, you could of course not rely on browser's own plugins, and use e.g Mozilla's PDF.js over which you'll get an extended control.

这篇关于为 <embed> 设置默认的另存为名称.或&lt;iframe&gt;使用 Blob的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！