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 ?

So i think its not possible to give filename using dta-uri. Can it be done through javascript?? — parbi, Aug 08 '11 at 10:15

score 44 · Answer 1 · edited Dec 22 '13 at 07:38

44

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

edited Dec 22 '13 at 07:38

Zombo

1
62
391
407

answered Dec 17 '12 at 13:08

Ashraf Bashir

9,686
15
57
82

But how can it done with "OnClick= location href ? i'm trying to figure this one.. – Ron Dec 09 '14 at 06:18
@Ron, kindly check the link at the end of my solution, I think you may find there the answer which you are asking for. – Ashraf Bashir Dec 09 '14 at 12:30
@CristianTraìna, have you found a way? – Vigrant Jun 07 '19 at 21:50
1

@Vigrant no, I've a [related question](https://stackoverflow.com/questions/55760169/alternative-for-download-attribute-in-safari-ios) with no answers. By the way, I worked it around since I needed to download a pdf so I used `application/pdf` – Christian Vincenzo Traina Jun 08 '19 at 21:43
If anyone ends up here, this _shoud_ be fixed in ios 13 – Vigrant Aug 08 '19 at 22:10

score 6 · Answer 2 · answered Apr 08 '15 at 06:59

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

In iOS, this just opens a page with the base64 as text – Christian Vincenzo Traina Apr 19 '19 at 11:53 — Christian Vincenzo Traina, Apr 19 '19 at 11:53

score 2 · Answer 3 · answered Mar 13 '17 at 22:37

I had the same issue and finally I solved in all browsers serving the CSV file in the server-side:

const result = json2csv({ data });

res.writeHead(200
        'Content-Type': 'application/octet-stream',
        'Content-Disposition': 'attachment;filename=issues.csv',
        'Content-Length': result.length
});

res.end(result);

score 1 · Answer 4 · answered Feb 02 '15 at 01:23

1

For those that are using other libraries like angularjs or backbone, you can try something like this.

$('a.download').attr('href', 'data:application/csv;charset=utf-8,'+$scope.data);

answered Feb 02 '15 at 01:23

Rick

12,606
2
43
41

score 1 · Answer 5 · edited Jun 26 '19 at 17:50

For anybody looking for a client-side solution using Javascript only, here is mine, working on any browser except IE 10 and lower (and Edge...why?!):

var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(csv);
var link = document.createElement('a');
link.setAttribute("download", "extract.csv");
link.setAttribute("href", uri);
document.body.appendChild(link);
link.click();
body.removeChild(body.lastChild);

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

5 Answers5

Linked