Related
I have this part of code as my function in my react project:
const handleDownload = (base64String) => {
const link = document.createElement("a");
link.href = `data:application/pdf;base64,${base64String}`;
link.download = "manual.pdf";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
it is attached to a span tag with an image on it. whenever I click on the span this function downloads a "manual.pdf" file using the base64 string received from API.
this code works on browsers like Chrome or Firefox but it doesn't work on Safari in iOS (15.7.2)
it just shows data: in address bar for a moment and then nothing happens.
I tried to createObjectUrl by getting blob and something like this, but it didn't work. it creates weird url like this:
blob:http://MY ADRESS HERE. in this case it doesn't work on any browser.
is there any way to make my function compatible with Safari on iOS? I don't have mac so I don't know if the same thing applies to safari on mac or not.
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?
Use the download attribute:
<a download='FileName' href='your_url'>
The download attribute works on Chrome, Firefox, Edge, Opera, desktop Safari 10+, iOS Safari 13+, and not IE11.
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();
}
HTML only: use the download attribute:
<a download="logo.gif" href="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">Download transparent png</a>
Javascript only: you can save any data URI with this code:
function saveAs(uri, filename) {
var link = document.createElement('a');
if (typeof link.download === 'string') {
link.href = uri;
link.download = filename;
//Firefox requires the link to be in the body
document.body.appendChild(link);
//simulate click
link.click();
//remove the link when done
document.body.removeChild(link);
} else {
window.open(uri);
}
}
var file = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
saveAs(file, 'logo.gif');
Chrome, Firefox, and Edge 13+ will use the specified filename.
IE11, Edge 12, and Safari 9 (which don't support the download attribute) will download the file with their default name or they will simply display it in a new tab, if it's of a supported file type: images, videos, audio files, …
According to RFC 2397, no, there isn't.
Nor does there appear to be any attribute of the <a> element that you can use either.
However HTML5 has subsequently introduced the download attribute on the <a> element, although at the time of writing support is not universal (no MSIE support, for example)
I've looked a bit in firefox sources in netwerk/protocol/data/nsDataHandler.cpp
data handler only parses content/type and charset, and looks if there is ";base64"
in the string
the rfc specifices no filename and at least firefox handles no filename for it,
the code generates a random name plus ".part"
I've also checked firefox log
[b2e140]: DOCSHELL 6e5ae00 InternalLoad data:application/octet-stream;base64,SGVsbG8=
[b2e140]: Found extension '' (filename is '', handling attachment: 0)
[b2e140]: HelperAppService::DoContent: mime 'application/octet-stream', extension ''
[b2e140]: Getting mimeinfo from type 'application/octet-stream' ext ''
[b2e140]: Extension lookup on '' found: 0x0
[b2e140]: Ext. lookup for '' found 0x0
[b2e140]: OS gave back 0x43609a0 - found: 0
[b2e140]: Searched extras (by type), rv 0x80004005
[b2e140]: MIME Info Summary: Type 'application/octet-stream', Primary Ext ''
[b2e140]: Type/Ext lookup found 0x43609a0
interesting files if you want to look at mozilla sources:
data uri handler: netwerk/protocol/data/nsDataHandler.cpp
where mozilla decides the filename: uriloader/exthandler/nsExternalHelperAppService.cpp
InternalLoad string in the log: docshell/base/nsDocShell.cpp
I think you can stop searching a solution for now, because I suspect there is none :)
as noticed in this thread html5 has download attribute, it works also on firefox 20 http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download
The following Javascript snippet works in Chrome by using the new 'download' attribute of links and simulating a click.
function downloadWithName(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
}
And the following example shows it's use:
downloadWithName("data:,Hello%2C%20World!", "helloWorld.txt")
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.
you can add a download attribute to the anchor element.
sample:
<a download="abcd.cer"
href="data:application/stream;base64,MIIDhTC......">down</a>
Using service workers, this is finally possible in the truest sense.
Create a fake URL. For example /saveAs/myPrettyName.jpg
Use URL in <a href, <img src, window.open( url ), absolutely anything that can be done with a "real" URL.
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 );
}
});
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.
There is a tiny workaround script on Google Code that worked for me:
http://code.google.com/p/download-data-uri/
It adds a form with the data in it, submits it and then removes the form again. Hacky, but it did the job for me. Requires jQuery.
This thread showed up in Google before the Google Code page and I thought it might be helpful to have the link in here, too.
Here is a jQuery version based off of Holf's version and works with Chrome and Firefox whereas his version seems to only work with Chrome. It's a little strange to add something to the body to do this but if someone has a better option I'm all for it.
var exportFileName = "export-" + filename;
$('<a></a>', {
"download": exportFileName,
"href": "data:," + JSON.stringify(exportData, null,5),
"id": "exportDataID"
}).appendTo("body")[0].click().remove();
This one works with Firefox 43.0 (older not tested):
dl.js:
function download() {
var msg="Hello world!";
var blob = new File([msg], "hello.bin", {"type": "application/octet-stream"});
var a = document.createElement("a");
a.href = URL.createObjectURL(blob);
window.location.href=a;
}
dl.html
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<script type="text/javascript" src="dl.js"></script>
</head>
<body>
<button id="create" type="button" onclick="download();">Download</button>
</body>
</html>
If button is clicked it offered a file named hello.bin for download. Trick is to use File instead of Blob.
reference: https://developer.mozilla.org/de/docs/Web/API/File
(This answer has been made deprecated by newer technology, but will be kept here for historical interest.)
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 right-click me and select "Save Link As..." and save as "example.txt". 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.
<a href=.. download=.. > works for left-click and right-click -> save link as..,
but <img src=.. download=.. > doesn't work for right-click -> save image as.. , "Download.jped" is suggested.
If you combine both:<a href=.. download=..><img src=..></a>
it works for left-click, right-click -> save link as.., right-click -> save image as..
You have to write the data-uri twice (href and src), so for large image files it is better to copy the uri with javascript.
tested with Chrome/Edge 88
var isIE = /*#cc_on!#*/false || !!document.documentMode; // At least IE6
var sessionId ='\n';
var token = '\n';
var caseId = CaseIDNumber + '\n';
var url = casewebUrl+'\n';
var uri = sessionId + token + caseId + url;//data in file
var fileName = "file.i4cvf";// any file name with any extension
if (isIE)
{
var fileData = ['\ufeff' + uri];
var blobObject = new Blob(fileData);
window.navigator.msSaveOrOpenBlob(blobObject, fileName);
}
else //chrome
{
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function (fs) {
fs.root.getFile(fileName, { create: true }, function (fileEntry) {
fileEntry.createWriter(function (fileWriter) {
var fileData = ['\ufeff' + uri];
var blob = new Blob(fileData);
fileWriter.addEventListener("writeend", function () {
var fileUrl = fileEntry.toURL();
var link = document.createElement('a');
link.href = fileUrl;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}, false);
fileWriter.write(blob);
}, function () { });
}, function () { });
}, function () { });
}
You actually can achieve this, in Chrome and FireFox.
Try the following url, it will download the code that was used.
data:text/html;base64,PGEgaHJlZj0iZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LFBHRWdhSEpsWmowaVVGVlVYMFJCVkVGZlZWSkpYMGhGVWtVaUlHUnZkMjVzYjJGa1BTSjBaWE4wTG1oMGJXd2lQZ284YzJOeWFYQjBQZ3BrYjJOMWJXVnVkQzV4ZFdWeWVWTmxiR1ZqZEc5eUtDZGhKeWt1WTJ4cFkyc29LVHNLUEM5elkzSnBjSFErIiBkb3dubG9hZD0idGVzdC5odG1sIj4KPHNjcmlwdD4KZG9jdW1lbnQucXVlcnlTZWxlY3RvcignYScpLmNsaWNrKCk7Cjwvc2NyaXB0Pg==
I have some JavaScript code as given under first code snippet, that works in latest Chrome but not in latest FireFox. This code is exporting data to xls file using Blob object. The strange thing is that in FireFox, the code does not throw any error but does nothing as it executes all the lines successfully i.e. no export happens.
A demo for this question is at this URL: http://js.do/sun21170/84920
If you run the code in above demo in Chrome, it will download the file newfile.xls ( allow popups in Chrome).
Question: What change I need to make in Blob Code given below, in order to make it work in FireFox? I tried using type: 'application/octet-stream' and also type: 'text/plain', but both did not help in FireFox.
The variable table in code snippet below holds a string that is the html for rendering a table including html and body tags.
Blob Code for exporting (not working in FireFox)
//export data in Chrome or FireFox
//this works in Chrome but not in FireFox
//also no errors in firefox
sa = true;
var myBlob = new Blob( [table] , {type:'text/html'});
var url = window.URL.createObjectURL(myBlob);
var a = document.createElement("a");
document.body.appendChild(a);
a.href = url;
a.download = "newfile.xls";
a.click();
window.URL.revokeObjectURL(url);
The answer to my question is as explained below.
The problem was that the line window.URL.revokeObjectURL(url) was being called too soon for FireFox to react to a.click() and show it's file dialog. So, I just added a delay by using setTimeout for the line window.URL.revokeObjectURL(url). This change made it work in FireFox. Of course, it worked in Chrome also.
The updated code is as below which has only one change in the last line of code. Also, the demo with this change that works in FireFox is: http://js.do/sun21170/84977
Blob Code for exporting (this works in FireFox and Chrome)
//export data in Chrome or FireFox
//this works in Chrome as well as in FireFox
sa = true;
var myBlob = new Blob( [table] , {type:'text/html'});
var url = window.URL.createObjectURL(myBlob);
var a = document.createElement("a");
document.body.appendChild(a);
a.href = url;
a.download = "newfile.xls";
a.click();
//adding some delay in removing the dynamically created link solved the problem in FireFox
setTimeout(function() {window.URL.revokeObjectURL(url);},0);
While the above code works perfectly, I think when exporting to xls file, it's better to use type:'application/vnd.ms-excel even though the table variable holds a html string.
This small change makes FireFox automatically use Excel as the default program for opening the exported file else FireFox uses Laucnch Windows app (default) to open the file. This default app on my laptop was Edge browser.
var myBlob = new Blob( [table] , {type:'application/vnd.ms-excel'});
If you would like to use 100% client-side approach in older IE browsers, then Blob object cannot be used since it's not available in older IE browsers, but you can use another approach as in code snippet below.
Exporting Html to Excel in IE <= IE 11 including IE 8 and IE 9
function ExportTabletoExcelInOldIE(table)
{
//table variable contains the html to be exported to Excel
var sa = null;
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0) // If old Internet Explorer including IE 8
{
//make sure you have an empty div with id of iframeDiv in your page
document.getElementById('iframeDiv').innerHTML = '<iframe id="txtArea1" style="display:none"></iframe>';
txtArea1.document.open("txt/html", "replace");
txtArea1.document.write(table);
txtArea1.document.close();
txtArea1.focus();
sa = txtArea1.document.execCommand("SaveAs", true, "DataExport.xls");
document.getElementById('iframeDiv').innerHTML = "";
}
return (sa);
}
For above IE specific code to work, add following to your page markup.
Empty Div needed when exporting in older IE browsers
<div id='iframeDiv'></div>
You can try to add the anchor to the dom like this:
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
I know this trouble with Blob and CSV Export. My solution: Create an Array and POST it to a backend script. Then you can simply create a Excel, CSV, PDF etc.
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?
Use the download attribute:
<a download='FileName' href='your_url'>
The download attribute works on Chrome, Firefox, Edge, Opera, desktop Safari 10+, iOS Safari 13+, and not IE11.
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();
}
HTML only: use the download attribute:
<a download="logo.gif" href="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">Download transparent png</a>
Javascript only: you can save any data URI with this code:
function saveAs(uri, filename) {
var link = document.createElement('a');
if (typeof link.download === 'string') {
link.href = uri;
link.download = filename;
//Firefox requires the link to be in the body
document.body.appendChild(link);
//simulate click
link.click();
//remove the link when done
document.body.removeChild(link);
} else {
window.open(uri);
}
}
var file = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
saveAs(file, 'logo.gif');
Chrome, Firefox, and Edge 13+ will use the specified filename.
IE11, Edge 12, and Safari 9 (which don't support the download attribute) will download the file with their default name or they will simply display it in a new tab, if it's of a supported file type: images, videos, audio files, …
According to RFC 2397, no, there isn't.
Nor does there appear to be any attribute of the <a> element that you can use either.
However HTML5 has subsequently introduced the download attribute on the <a> element, although at the time of writing support is not universal (no MSIE support, for example)
I've looked a bit in firefox sources in netwerk/protocol/data/nsDataHandler.cpp
data handler only parses content/type and charset, and looks if there is ";base64"
in the string
the rfc specifices no filename and at least firefox handles no filename for it,
the code generates a random name plus ".part"
I've also checked firefox log
[b2e140]: DOCSHELL 6e5ae00 InternalLoad data:application/octet-stream;base64,SGVsbG8=
[b2e140]: Found extension '' (filename is '', handling attachment: 0)
[b2e140]: HelperAppService::DoContent: mime 'application/octet-stream', extension ''
[b2e140]: Getting mimeinfo from type 'application/octet-stream' ext ''
[b2e140]: Extension lookup on '' found: 0x0
[b2e140]: Ext. lookup for '' found 0x0
[b2e140]: OS gave back 0x43609a0 - found: 0
[b2e140]: Searched extras (by type), rv 0x80004005
[b2e140]: MIME Info Summary: Type 'application/octet-stream', Primary Ext ''
[b2e140]: Type/Ext lookup found 0x43609a0
interesting files if you want to look at mozilla sources:
data uri handler: netwerk/protocol/data/nsDataHandler.cpp
where mozilla decides the filename: uriloader/exthandler/nsExternalHelperAppService.cpp
InternalLoad string in the log: docshell/base/nsDocShell.cpp
I think you can stop searching a solution for now, because I suspect there is none :)
as noticed in this thread html5 has download attribute, it works also on firefox 20 http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download
The following Javascript snippet works in Chrome by using the new 'download' attribute of links and simulating a click.
function downloadWithName(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
}
And the following example shows it's use:
downloadWithName("data:,Hello%2C%20World!", "helloWorld.txt")
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.
you can add a download attribute to the anchor element.
sample:
<a download="abcd.cer"
href="data:application/stream;base64,MIIDhTC......">down</a>
Using service workers, this is finally possible in the truest sense.
Create a fake URL. For example /saveAs/myPrettyName.jpg
Use URL in <a href, <img src, window.open( url ), absolutely anything that can be done with a "real" URL.
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 );
}
});
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.
There is a tiny workaround script on Google Code that worked for me:
http://code.google.com/p/download-data-uri/
It adds a form with the data in it, submits it and then removes the form again. Hacky, but it did the job for me. Requires jQuery.
This thread showed up in Google before the Google Code page and I thought it might be helpful to have the link in here, too.
Here is a jQuery version based off of Holf's version and works with Chrome and Firefox whereas his version seems to only work with Chrome. It's a little strange to add something to the body to do this but if someone has a better option I'm all for it.
var exportFileName = "export-" + filename;
$('<a></a>', {
"download": exportFileName,
"href": "data:," + JSON.stringify(exportData, null,5),
"id": "exportDataID"
}).appendTo("body")[0].click().remove();
This one works with Firefox 43.0 (older not tested):
dl.js:
function download() {
var msg="Hello world!";
var blob = new File([msg], "hello.bin", {"type": "application/octet-stream"});
var a = document.createElement("a");
a.href = URL.createObjectURL(blob);
window.location.href=a;
}
dl.html
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<script type="text/javascript" src="dl.js"></script>
</head>
<body>
<button id="create" type="button" onclick="download();">Download</button>
</body>
</html>
If button is clicked it offered a file named hello.bin for download. Trick is to use File instead of Blob.
reference: https://developer.mozilla.org/de/docs/Web/API/File
(This answer has been made deprecated by newer technology, but will be kept here for historical interest.)
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 right-click me and select "Save Link As..." and save as "example.txt". 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.
<a href=.. download=.. > works for left-click and right-click -> save link as..,
but <img src=.. download=.. > doesn't work for right-click -> save image as.. , "Download.jped" is suggested.
If you combine both:<a href=.. download=..><img src=..></a>
it works for left-click, right-click -> save link as.., right-click -> save image as..
You have to write the data-uri twice (href and src), so for large image files it is better to copy the uri with javascript.
tested with Chrome/Edge 88
var isIE = /*#cc_on!#*/false || !!document.documentMode; // At least IE6
var sessionId ='\n';
var token = '\n';
var caseId = CaseIDNumber + '\n';
var url = casewebUrl+'\n';
var uri = sessionId + token + caseId + url;//data in file
var fileName = "file.i4cvf";// any file name with any extension
if (isIE)
{
var fileData = ['\ufeff' + uri];
var blobObject = new Blob(fileData);
window.navigator.msSaveOrOpenBlob(blobObject, fileName);
}
else //chrome
{
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function (fs) {
fs.root.getFile(fileName, { create: true }, function (fileEntry) {
fileEntry.createWriter(function (fileWriter) {
var fileData = ['\ufeff' + uri];
var blob = new Blob(fileData);
fileWriter.addEventListener("writeend", function () {
var fileUrl = fileEntry.toURL();
var link = document.createElement('a');
link.href = fileUrl;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}, false);
fileWriter.write(blob);
}, function () { });
}, function () { });
}, function () { });
}
You actually can achieve this, in Chrome and FireFox.
Try the following url, it will download the code that was used.
data:text/html;base64,PGEgaHJlZj0iZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LFBHRWdhSEpsWmowaVVGVlVYMFJCVkVGZlZWSkpYMGhGVWtVaUlHUnZkMjVzYjJGa1BTSjBaWE4wTG1oMGJXd2lQZ284YzJOeWFYQjBQZ3BrYjJOMWJXVnVkQzV4ZFdWeWVWTmxiR1ZqZEc5eUtDZGhKeWt1WTJ4cFkyc29LVHNLUEM5elkzSnBjSFErIiBkb3dubG9hZD0idGVzdC5odG1sIj4KPHNjcmlwdD4KZG9jdW1lbnQucXVlcnlTZWxlY3RvcignYScpLmNsaWNrKCk7Cjwvc2NyaXB0Pg==
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?
Use the download attribute:
<a download='FileName' href='your_url'>
The download attribute works on Chrome, Firefox, Edge, Opera, desktop Safari 10+, iOS Safari 13+, and not IE11.
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();
}
HTML only: use the download attribute:
<a download="logo.gif" href="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">Download transparent png</a>
Javascript only: you can save any data URI with this code:
function saveAs(uri, filename) {
var link = document.createElement('a');
if (typeof link.download === 'string') {
link.href = uri;
link.download = filename;
//Firefox requires the link to be in the body
document.body.appendChild(link);
//simulate click
link.click();
//remove the link when done
document.body.removeChild(link);
} else {
window.open(uri);
}
}
var file = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
saveAs(file, 'logo.gif');
Chrome, Firefox, and Edge 13+ will use the specified filename.
IE11, Edge 12, and Safari 9 (which don't support the download attribute) will download the file with their default name or they will simply display it in a new tab, if it's of a supported file type: images, videos, audio files, …
According to RFC 2397, no, there isn't.
Nor does there appear to be any attribute of the <a> element that you can use either.
However HTML5 has subsequently introduced the download attribute on the <a> element, although at the time of writing support is not universal (no MSIE support, for example)
I've looked a bit in firefox sources in netwerk/protocol/data/nsDataHandler.cpp
data handler only parses content/type and charset, and looks if there is ";base64"
in the string
the rfc specifices no filename and at least firefox handles no filename for it,
the code generates a random name plus ".part"
I've also checked firefox log
[b2e140]: DOCSHELL 6e5ae00 InternalLoad data:application/octet-stream;base64,SGVsbG8=
[b2e140]: Found extension '' (filename is '', handling attachment: 0)
[b2e140]: HelperAppService::DoContent: mime 'application/octet-stream', extension ''
[b2e140]: Getting mimeinfo from type 'application/octet-stream' ext ''
[b2e140]: Extension lookup on '' found: 0x0
[b2e140]: Ext. lookup for '' found 0x0
[b2e140]: OS gave back 0x43609a0 - found: 0
[b2e140]: Searched extras (by type), rv 0x80004005
[b2e140]: MIME Info Summary: Type 'application/octet-stream', Primary Ext ''
[b2e140]: Type/Ext lookup found 0x43609a0
interesting files if you want to look at mozilla sources:
data uri handler: netwerk/protocol/data/nsDataHandler.cpp
where mozilla decides the filename: uriloader/exthandler/nsExternalHelperAppService.cpp
InternalLoad string in the log: docshell/base/nsDocShell.cpp
I think you can stop searching a solution for now, because I suspect there is none :)
as noticed in this thread html5 has download attribute, it works also on firefox 20 http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download
The following Javascript snippet works in Chrome by using the new 'download' attribute of links and simulating a click.
function downloadWithName(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
}
And the following example shows it's use:
downloadWithName("data:,Hello%2C%20World!", "helloWorld.txt")
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.
you can add a download attribute to the anchor element.
sample:
<a download="abcd.cer"
href="data:application/stream;base64,MIIDhTC......">down</a>
Using service workers, this is finally possible in the truest sense.
Create a fake URL. For example /saveAs/myPrettyName.jpg
Use URL in <a href, <img src, window.open( url ), absolutely anything that can be done with a "real" URL.
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 );
}
});
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.
There is a tiny workaround script on Google Code that worked for me:
http://code.google.com/p/download-data-uri/
It adds a form with the data in it, submits it and then removes the form again. Hacky, but it did the job for me. Requires jQuery.
This thread showed up in Google before the Google Code page and I thought it might be helpful to have the link in here, too.
Here is a jQuery version based off of Holf's version and works with Chrome and Firefox whereas his version seems to only work with Chrome. It's a little strange to add something to the body to do this but if someone has a better option I'm all for it.
var exportFileName = "export-" + filename;
$('<a></a>', {
"download": exportFileName,
"href": "data:," + JSON.stringify(exportData, null,5),
"id": "exportDataID"
}).appendTo("body")[0].click().remove();
This one works with Firefox 43.0 (older not tested):
dl.js:
function download() {
var msg="Hello world!";
var blob = new File([msg], "hello.bin", {"type": "application/octet-stream"});
var a = document.createElement("a");
a.href = URL.createObjectURL(blob);
window.location.href=a;
}
dl.html
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<script type="text/javascript" src="dl.js"></script>
</head>
<body>
<button id="create" type="button" onclick="download();">Download</button>
</body>
</html>
If button is clicked it offered a file named hello.bin for download. Trick is to use File instead of Blob.
reference: https://developer.mozilla.org/de/docs/Web/API/File
(This answer has been made deprecated by newer technology, but will be kept here for historical interest.)
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 right-click me and select "Save Link As..." and save as "example.txt". 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.
<a href=.. download=.. > works for left-click and right-click -> save link as..,
but <img src=.. download=.. > doesn't work for right-click -> save image as.. , "Download.jped" is suggested.
If you combine both:<a href=.. download=..><img src=..></a>
it works for left-click, right-click -> save link as.., right-click -> save image as..
You have to write the data-uri twice (href and src), so for large image files it is better to copy the uri with javascript.
tested with Chrome/Edge 88
var isIE = /*#cc_on!#*/false || !!document.documentMode; // At least IE6
var sessionId ='\n';
var token = '\n';
var caseId = CaseIDNumber + '\n';
var url = casewebUrl+'\n';
var uri = sessionId + token + caseId + url;//data in file
var fileName = "file.i4cvf";// any file name with any extension
if (isIE)
{
var fileData = ['\ufeff' + uri];
var blobObject = new Blob(fileData);
window.navigator.msSaveOrOpenBlob(blobObject, fileName);
}
else //chrome
{
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function (fs) {
fs.root.getFile(fileName, { create: true }, function (fileEntry) {
fileEntry.createWriter(function (fileWriter) {
var fileData = ['\ufeff' + uri];
var blob = new Blob(fileData);
fileWriter.addEventListener("writeend", function () {
var fileUrl = fileEntry.toURL();
var link = document.createElement('a');
link.href = fileUrl;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}, false);
fileWriter.write(blob);
}, function () { });
}, function () { });
}, function () { });
}
You actually can achieve this, in Chrome and FireFox.
Try the following url, it will download the code that was used.
data:text/html;base64,PGEgaHJlZj0iZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LFBHRWdhSEpsWmowaVVGVlVYMFJCVkVGZlZWSkpYMGhGVWtVaUlHUnZkMjVzYjJGa1BTSjBaWE4wTG1oMGJXd2lQZ284YzJOeWFYQjBQZ3BrYjJOMWJXVnVkQzV4ZFdWeWVWTmxiR1ZqZEc5eUtDZGhKeWt1WTJ4cFkyc29LVHNLUEM5elkzSnBjSFErIiBkb3dubG9hZD0idGVzdC5odG1sIj4KPHNjcmlwdD4KZG9jdW1lbnQucXVlcnlTZWxlY3RvcignYScpLmNsaWNrKCk7Cjwvc2NyaXB0Pg==