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

问题描述

我使用PDFKit（没有节点）在浏览器中生成PDF，并通过src属性显示iframe或embed标签。生成的Blob URL是某种UUID。因此整个页面如下所示：

 < embed src =blob：http：// localhost / eeaabb ... /> 
  

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

如果这是一个服务器生成的PDF，我会使用Content-Disposition和/或操作URL，所以它的最后一部分是我想要的名称，但那不会'b
$ b

我曾尝试过的事情：

• 通过元数据设置PDF标题。这可以工作，但不会影响文件名。


• 操作嵌入标记标题属性。似乎没有做任何事情。


• 更改页面标题。不影响文件。


• 尝试将某些内容附加到数据网址。只是防止显示PDF。


• 通过POST上载PDF，然后通过可以控制URL的页面下载。可以工作，但似乎很疯狂，生成一个客户端PDF只需要上传到服务器。

有没有办法围绕这个，以便我可以控制默认/建议的文件名？

解决方案

我没有找到chrome的默认插件。虽然适用于Firefox，并且在Chrome中默认为 download.pdf ，原因有些奇怪......

<通过以

形式传递dataURI

 'data：application / pdf; headers =文件名％3D'+ FILE_NAME + '; base64，...'
  

Firefox接受FILE_NAME作为文件的名称，但chrome doesn 't ...

---

A download.pdf ，但它不喜欢zEGPcVn6ZbMnlTw1ySRw？p =预览rel =nofollow noreferrer> plnkr 嵌套的iframes ... $ / b>

以及只能在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（））然后（blob => {const f = new FileReader（）; f.onload =（）=> myPdfViewer.src = f.result.replace（';'，file_header + encodeURIComponent（FILE_NAME ）+';'）; f.readAsDataURL（blob）;}）;  

 < iframe id =myPdfViewerwidth =500height =500>< / iframe>  

$ b / mozilla.github.io/pdf.js/rel =nofollow noreferrer> Mozilla的PDF.js ，您可以通过它扩展控制。

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..."/>

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".

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.

Things I have tried:

• Setting the PDF title via the metadata. This works but doesn't affect the filename.
• Manipulating the embed tag title attribute. Doesn't seem to do anything.
• Change the page title. Doesn't affect the file.
• Try to append something to the data url. Just prevents the PDF from displaying.
• Upload the PDF via POST, then download it via a page where I can control the URL. Could work, but seems crazy to generate a client-side PDF only to have to upload it to the server.

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

解决方案

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...

By passing a dataURI in the form of

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

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

---

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

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>

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.

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