Download file from jquery/javascript

Question

I have a java script file in which a variable has some string like:

var xw = 'Some content';

I want to download this string as a file. How to do this in JQuery/javascript? I don't want to send any request on server using AJAX. Is there any way to download in purely JQuery/javascript ?

Check this post. http://stackoverflow.com/questions/1296085/download-file-using-jquery — Eric Leroy, Oct 12 '12 at 11:51
It works only when i have a file already created. But i don't have such type of any file. — Abhendra Singh, Oct 12 '12 at 11:54
This is a sample demo service. We are not using java and any other server side programming. This is normal HTML project. — Abhendra Singh, Oct 12 '12 at 12:09
Is there anyway to change the download file name? Right now it just shows as `download`?! — Omar Wagih, Nov 20 '13 at 01:05

score 8 · Accepted Answer · answered Oct 12 '12 at 11:55

8

<a href="data:application/octet-stream;charset=utf-8;base64,U29tZSBjb250ZW50">Download "Some content" as a text file</a>

http://jsfiddle.net/5tJ5p/

answered Oct 12 '12 at 11:55

skovalyov

2,069
1
16
12

How it is working? Do we need to encrypt data? Please can you explain it? – Abhendra Singh Oct 12 '12 at 12:02
2

Yes, you need to encode data. In base64 in this case. Basically "U29tZSBjb250ZW50" is a base64 representation of "Some content" string. You can read more about this approach at https://developer.mozilla.org/en-US/docs/data_URIs or http://en.wikipedia.org/wiki/Data_URI_scheme. Please, consider browser adoption. – skovalyov Oct 12 '12 at 12:04
Is there any way so i don't need to encode? Or if i need to encode then how to encode it in javascript in optimized way. – Abhendra Singh Oct 12 '12 at 12:06
1

You can encode a string as base64 in JavaScript using btoa() function. For example: `alert(btoa("Some content"));` – skovalyov Oct 12 '12 at 12:11
Nice. I've never seen this before. – Eric Leroy Oct 12 '12 at 12:18
Thanx it worked for me.. :-) But i am not able to chenge name of file. Can we do it? – Abhendra Singh Oct 12 '12 at 13:15
1

You can specify a download attribute on tag, see http://jsfiddle.net/5tJ5p/1/, but again you need to check details about adoption. You can also take a look at Blob and File API that provides another way to achieve the same objective. See http://html5-demos.appspot.com/static/a.download.html as an example. – skovalyov Oct 12 '12 at 13:36
2

If i want to download using `window.location.href=URL` then how to use download attribute to change name of file? – Abhendra Singh Oct 17 '12 at 12:41
From what I know currently it is not possible client side. – skovalyov Oct 17 '12 at 13:04

score 2 · Answer 2 · answered Oct 12 '12 at 11:51

2

You're looking for Downloadify.

answered Oct 12 '12 at 11:51

SLaks

868,454
176
1,908
1,964

Not sure if that's what he wants. But then again, the question is horribly vague... – ThiefMaster Oct 12 '12 at 11:51
Not really a pure javascript/jquery solution, but I use a similar hack to onclick copy to the clip board. – Eric Leroy Oct 12 '12 at 11:53
I think it's the best he's going to find. – Eric Leroy Oct 12 '12 at 11:53
As much as I hate to upvote something that requires Flash, there doesn't seem to be a better cross browser solution. – Ollie Apr 01 '13 at 22:29

Download file from jquery/javascript

2 Answers2