Force URL loading: data / plain

Question

I was wondering if it is possible to make the browser (at least Chrome) load the data:text/plain URL.

Chrome downloads binary URLs (e.g. data:application/zip;base64,... ), but doesn’t download files that can be viewed inside the browser (e.g. text files).

What I already tried, so far with no luck:

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

But it seems like I cannot add such headers.

Is there a way to get Chrome to load the data:text/plain,... URL?

Answer 1

It is now possible to use <a download> in Chrome. Using dispatchEvent , you can load any line as a file (even with a custom file name) whenever you want. The utility function is used here:

 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); }; 

Using:

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

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

Answer 2

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

It uses the HTML5 attribute download="filename.ext" . (no need for JS :)

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

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

(At the moment, 2013, neither IE nor Safari support)

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

Answer 3

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

 Content-disposition: attachment;filename=test.txt 

I don't like it, but it works pretty well.

Answer 4

It works like 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> 

Answer 5

Here is a clean Javascript solution for creating a text blob and loading it as a 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();