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

Question

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?

Solution 1

---

---

Note:
This answer is outdated.
The behavior described below did change since it was posted, and it may still change in the future.
Since this question has been asked elsewhere, with better responses, I invite you to read these instead: Can I set the filename of a PDF object displayed in Chrome?

---

---

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.

Solution 2

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

No. You cannot control the name of a file stored at user local filesystem.

You can use <a> element with download attribute set to suggested file name. If user selects to download offered file user can change the file name at any time before or after downloading file.

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

At chrome, chromium browsers you can use requestFileSystem to store Blob, File or Directory at LocalFileSystem, which writes file to browser configuration directory, or other directories within user operating system. See

• How to Write in file (user directory) using JavaScript?
• jQuery File Upload Plugin: Is possible to preserve the structure of uploaded folders?
• Where is Blob binary data stored?

Comments

[Kaiido]

I don't think it actually answers actual question (even if from my investigation the same "nope" answer would apply) : OP is trying to control the pdf-viewer plugin built-in chrome, which does expose an "Download" button.

[guest271314]

@Kaiido OP does not mention a .pdf plugin at Question? The answer is the same as to download of file and "control" of the name of the downloaded file at user filesystem.

[Kaiido]

"when I click the Download link in Chrome" this is the download link from the pdf viewer plugin.

[guest271314]

@Kaiido Then OP should review plugin code, make necessary adjustments, or compose own .pdf viewer plugin. If OP is trying to offer file for download outside of pdf viewer plugin, use <a> element with download attribute set to suggest file name of offered file. OP could also try substituting a data URI for Blob URL. Neither approach can "control" the file name of downloaded file at user filesystem.

[Kaiido]

Try on FF, unfortunately, it doesn't even load on chrome, probably because of iframes restrictions. Clearly does appear on my localhost though...

[guest271314]

The suggested file name only appears at prompt when the data URI is navigated to at separate browser tab and download icon is clicked, not within <embed> or <iframe> element. It is not clear what "the Download link" is referencing at original Question.

[Kaiido]

@guest271314 I added a link to a plnkr for chrome. The thing you've got to click is this i.stack.imgur.com/jyf0k.png

[guest271314]

The width, height setting at <iframe> appears to determine if download icon is displayed plnkr.co/edit/tvVEtIpKxK1YUStGNl3Q?p=preview

[Kaiido]

@guest271314, yep their plugin's UI may not be perfect.

[guest271314]

The firefox approach at firefox appears to return expected result. The "data" URL scheme specification does not appear to mention file name tools.ietf.org/html/rfc2397. Where did you find, or did you develop the headers solution? Is setting file name at data URI mentioned in one of the w3c mailing lists?

[guest271314]

lists.w3.org/Archives/Public/uri/2010Feb/0069.html from stackoverflow.com/questions/283956/…

[Kaiido]

@guest271314, yep that was an attempt to use this "never implemented in specs" feature, and I was a bit surprised to see it working in FF to be honest.

[espidesigns]

This solution does work for FireFox and Chrome sets it to 'download' which is an improvement over a uuid so I marked the answer as accepted. For IE, I had to use a different strategy (window.navigator.msSaveOrOpenBlob) which does let me control the suggested name although forces the user to save whether they want to or not. Bottom line is that the answer to my original question is "not really". Hopefully the FF syntax will become a standard.

[connectedMind]

In Firefox it will be downloaded as "document.pdf" in Chrome as "download.pdf"

[Kaiido]

@connectedMind yes, in 4 years things have probably changed, but the main point stays the same anyway: If it's important, don't rely on the browser's internal plugin. And actually, this question is a duplicate of stackoverflow.com/questions/53548182/… where I did propose a better solution, which still seems to work as of today.

[Kaiido]

@connectedMind actually I was a bit fast, it doesn't work in Chrome either...