Creating download prompt using purely javascript

Question

I have some text data (say var a = 'Hello World From Javascript';)in javascript variable in current window. I want to do the following through javascript-

1. open a new window and write the text data to the window.
2. set the content type to text/plain.
3. set the content-disposition to attachment, so that download prompt comes.
4. user downloads the text data as a text file and saves it to his local disk.

is this all possible through javascript?

I know we can make ajax calls to server or redirect but in this case instead of following above steps. But in this case, these workarounds are not adaptable.

score 5 · Answer 1 · answered Dec 02 '13 at 11:00

you can do that using JS & HTML5 features. Please find below a sample code.

        var fileParts = ['Hello World From Javascript'];

        // Create a blob object.
        var bb = new Blob(fileParts,{type : 'text/plain'});

        // Create a blob url for this. 
        var dnlnk = window.URL.createObjectURL(bb);

        var currentLnk = $('#blobFl').attr('href');

        // blobFl is the id of the anchor tag through which the download will be triggered.

        $('#blobFl').attr('href',dnlnk);
        $('#blobFl').attr('download','helloworld.txt');

        // For some reason trigger from jquery dint work for me.
        document.getElementById('blobFl').click();

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

3

Triggering a file download without any server request

Unfortunately this is not something you can do with normal browser capabilities. Something like flash or a browser-specific plugin will get you what you need, but security limitations within javascript will not let you download arbitrary data created within the browser.

Also the 'data' url is not supported across all browser/version combinations. I am not sure if your users are constrained on what browser they are using or not but that may limit what you can do with that solution.

Source: Triggering a file download without any server request

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 25 '12 at 08:39

Praveen Kumar Purushothaman

164,888
24
203
252

For anybody that comes across this now: files can now be created in-browser and downloaded using [FileSaver.js](https://eligrey.com/blog/saving-generated-files-on-the-client-side/). However, you still can't prompt the user for a path to save to; that's apparently never going to be allowed in javascript, as it's a security risk. – Charles Wood Jul 19 '17 at 14:20

score 2 · Answer 3 · answered Jul 09 '13 at 09:26

2

If you already have the file on the server (I make an ajax call to generate and save a PDF on the server) - you can do this

window.location.replace(fileUrl);

answered Jul 09 '13 at 09:26

automaticAllDramatic

2,025
1
21
25

score 1 · Answer 4 · answered Nov 25 '12 at 03:59

1

No, Content-Disposition is a response header, it has to come from the server. I think you could do it with Flash but I wouldn't recommend it.

answered Nov 25 '12 at 03:59

Popnoodles

28,090
2
45
53

score 0 · Answer 5 · answered Mar 25 '21 at 16:06

Here's a clean, pure js version of @Rajagopalan Srinivasan's answer:

var fileParts = ["Hello World From Javascript"];
// The anchor tag to use.
const blobLink = document.getElementById("blobLink");
// Create a blob object.
var blob = new Blob(fileParts, { type: "text/plain" });

// Create a blob url for this.
var blobUrl = window.URL.createObjectURL(blob);

blobLink.setAttribute("href", blobUrl);
blobLink.setAttribute("download", "helloworld.txt");
blobLink.click();

<a id="blobLink">Download</a>

Creating download prompt using purely javascript

5 Answers5

Triggering a file download without any server request

Source: Triggering a file download without any server request

Linked