Is there any way to specify a suggested filename w

Question

If for example you follow the link:

data:application/octet-stream;base64,SGVsbG8=

The browser will prompt you to download a file consisting of the data held as base64 in the hyperlink itself. Is there any way of suggesting a default name in the markup? If not, is there a JavaScript solution?

Answer 1

It's kind of hackish, but I've been in the same situation before. I was dynamically generating a text file in javascript and wanted to provide it for download by encoding it with the data-URI.

This is possible with minormajor user intervention. Generate a link <a href="data:...">right-click me and select "Save Link As..." and save as "example.txt"</a>. As I said, this is inelegant, but it works if you do not need a professional solution.

This could be made less painful by using flash to copy the name into the clipboard first. Of course if you let yourself use Flash or Java (now with less and less browser support I think?), you could probably find a another way to do this.

Answer 2

Look at this link: http://lists.w3.org/Archives/Public/uri/2010Feb/0069.html

Quote:

It even works (as in, doesn't cause a problem) with ;base64 at the end
like this (in Opera at least):

data:text/plain;charset=utf-8;headers=Content-Disposition%3A%20attachment%3B%20filename%3D%22with%20spaces.txt%22%0D%0AContent-Language%3A%20en;base64,4oiaDQo%3D

Also there is some info in the rest messages of the discussion.

Answer 3

Using service workers, this is finally possible in the truest sense.

1. Create a fake URL. For example /saveAs/myPrettyName.jpg
2. Use URL in <a href, <img src, window.open( url ), absolutely anything that can be done with a "real" URL.
3. Inside the worker, catch the fetch event, and respond with the correct data.

The browser will now suggest myPrettyName.jpg even if the user opens the file in a new tab, and tries to save it there. It will be exactly as if the file had come from the server.

// In the service worker
self.addEventListener( 'fetch', function(e)
{
    if( e.request.url.startsWith( '/blobUri/' ) )
    {
        // Logic to select correct dataUri, and return it as a Response
        e.respondWith( dataURLAsRequest );
    }
});

Answer 4

Chrome makes this very simple these days:

function saveContent(fileContents, fileName)
{
    var link = document.createElement('a');
    link.download = fileName;
    link.href = 'data:,' + fileContents;
    link.click();
}

Answer 5

Use the download attribute:

<a download='FileName' href='your_url'>

Live example on html5-demos.appspot.com/....

Currently works on Chrome, Firefox, Edge, Opera, and desktop Safari but not iOS Safari or IE11.

Answer 6

No.

The entire purpose is that it's a datastream, not a file. The data source should not have any knowledge of the user agent handling it as a file... and it doesn't.