Force download of 'data:text/plain' URL

Question

I was wondering whether it is possible to force a browser (at least Chrome) to download a data:text/plain URL.

Chrome does download binary URLs (e.g. data:application/zip;base64,...), but it does not download files that can be viewed inside the browser (such as text files).

What I already tried with no luck so far is this:

data:text/plain;content-disposition=attachment;filename=test.txt;...

But it seems like I cannot add headers like this.

Is there any way to make Chrome download a data:text/plain,... URL?

score 18 · Accepted Answer · answered Jul 27 '12 at 10:36

18

As of now, it has been made possible to use <a download> in Chrome. Using dispatchEvent, you can download any string as file (even with a custom filename) whenever you want. Here's a utility function to use it:

var downloadFile = function(filename, content) {
  var blob = new Blob([content]);
  var evt = document.createEvent("HTMLEvents");
  evt.initEvent("click");
  $("<a>", {
    download: filename,
    href: webkitURL.createObjectURL(blob)
  }).get(0).dispatchEvent(evt);
};

Usage:

downloadFile("foo.txt", "bar");

It uses jQuery and the webkit prefix, but both can be avoided.

answered Jul 27 '12 at 10:36

pimvdb

151,816
78
307
352

`` seems really great, and this function works as advertised in Chrome. (I'm already using jQuery) Would it be possible to amend this function to also work in Firefox and/or Safari? I don't know enough about `initEvent` and `Blob` and `createObjectURL` to know what's possible. Thanks. – Harold Aug 06 '13 at 17:24
3

@Harold Safari doesn't support the `download` attribute. – Steve Buzonas Dec 06 '14 at 00:24

score 15 · Answer 2 · edited May 29 '20 at 08:27

Try this:

<a download="file_downloaded_via_data_URL.txt"
href="data:text/plain;base64,SGVsbG8sIHdvcmxkISBJJ20gZG93bmxvYWRlZCB2aWEgImRhdGE6dGV4dC9wbGFpbjsuLi4iIFVSTCB1c2luZyA8YSBkb3dubG9hZD0iZmlsZV9uYW1lIi4uLj4uDQpNeSBiaXJ0aHBsYWNlOiBodHRwOi8vc3RhY2tvdmVyZmxvdy5jb20vcXVlc3Rpb25zLzY0Njg1MTcvDQoNCk1vcmUgYWJvdXQ6DQpodHRwOi8vd3d3LnczLm9yZy9UUi9odG1sL2xpbmtzLmh0bWwjYXR0ci1oeXBlcmxpbmstZG93bmxvYWQNCmh0dHA6Ly93d3cudzMub3JnL1RSL2h0bWwvbGlua3MuaHRtbCNkb3dubG9hZGluZy1yZXNvdXJjZXMNCg0KQnJvd3NlciBzdXBwb3J0OiBodHRwOi8vY2FuaXVzZS5jb20vZG93bmxvYWQ=">
    Download text file
</a>

It uses HTML5 attribute download="filename.ext". (no JS needed:)

More about: http://www.w3.org/TR/html/links.html#downloading-resources

Browser support can be checked at http://caniuse.com/download

(As for now, 2013, no IE nor Safari support)

I think, you can make a fallback for not-supporting browsers: use JS to change value of href="..." to the URL of your server script (which will return the file contents with appropriate HTTP header Content-disposition: attachment;filename=filename.txt).

this is awesome, some new browser do not support navigate to data url right now in 2017 — code4j, Aug 03 '17 at 02:00
This doesn't work on files hosted on third-party sites though (i.e. CDN) even when CORS is enabled. — KHAYRI R.R. WOULFE, Jul 21 '21 at 07:53

score 11 · Answer 3 · answered Jun 19 '19 at 09:33

11

Here is a pure Javascript solution for creating a text blob and download as text file

var fileContent = 'This is sample text file';
var fileName = 'sampleFile.txt';

const blob = new Blob([fileContent], { type: 'text/plain' });
const a = document.createElement('a');
a.setAttribute('download', fileName);
a.setAttribute('href', window.URL.createObjectURL(blob));
a.click();

answered Jun 19 '19 at 09:33

Rahul Gupta

9,775
7
56
69

1

I tried other solution, but it's always doesn't work on Microsoft Edge. But this simple solution seems to be working well on Chrome, Mozilla and Microsoft Edge. Thanks! – Michael Harley Jan 08 '20 at 13:19

score 1 · Answer 4 · answered Jun 25 '11 at 14:01

1

What I did was sending the data to a server, which sends them back with the following HTTP header:

Content-disposition: attachment;filename=test.txt

I don't like this, but it works rather well.

answered Jun 25 '11 at 14:01

pimvdb

151,816
78
307
352

score 0 · Answer 5 · answered Feb 21 '17 at 13:53

This works as hell ...

<div class="tags-style-one dragme" draggable="true" data-transfer="33343">some value is 33343</div>

    <script type="text/javascript">
    (function ($) {
        $(document).ready(function () {
        $('.dragme').on("dragstart",function(evt) {
            evt.originalEvent
                    .dataTransfer
                    .setData(
                            "text/plain",
                            $(this).data('transfer').toString()
                    );
        });
    })(jQuery);
</script>

Force download of 'data:text/plain' URL

5 Answers5

Linked

Related