Filename of downloaded file in data:Application/octet-stream;

Question

I am trying to download a file using data uri in following manner:

<input type="button"   onclick="window.location.href='data:Application/octet-stream;content-disposition:attachment;filename=file.txt,${details}'"   value="Download"/> 

The problem is that the downloaded file is always named 'Unknown', whatever I try to use as filename. Is this the correct way to give the file a name ? or something else needs to be done ?

Answer 1

Here's the solution, you just have to add a download attribute to anchor tag a with desired name

<a href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333"   download="somedata.csv">Example</a> 

Another solution is to use JQuery/Javascript

Anchor's Download Property

Answer 2

On Safari, you might want to use this, and instruct the user to ⌘-S the file:

window.open('data:text/csv;base64,' + encodeURI($window.btoa(content))); 

Otherwise, this uses Filesaver.js, but works ok:

    var downloadFile = function downloadFile(content, filename) {       var supportsDownloadAttribute = 'download' in document.createElement('a');        if(supportsDownloadAttribute) {         var link = angular.element('<a/>');         link.attr({           href: 'data:attachment/csv;base64,' + encodeURI($window.btoa(content)),           target: '_blank',           download: filename         })[0].click();         $timeout(function() {           link.remove();         }, 50);       } else if(typeof safari !== 'undefined') {         window.open('data:attachment/csv;charset=utf-8,' + encodeURI(content));       } else {         var blob = new Blob([content], {type: "text/plain;charset=utf-8"});         saveAs(blob, filename);       }     } 

Note: There is some AngularJS in the code above, but it should be easy to factor out...