How to use filesaver.js

Question

In the latest filesaver documentation, an example is given for how to use filesaver.js in conjunction with blobbuilder.js:

var bb = new BlobBuilder();
bb.append("Lorem ipsum");
var fileSaver = window.saveAs(bb.getBlob(), "test_file");
fileSaver.onwriteend = myOnWriteEnd;`

However blobbuilder.js has been deprecated and they now say to use blob.js (I can't find the code for blobbuilder.js anyway).

Can anyone give me an example of how to use filesaver together with blob.js?

Hi, I see that is code to take the contents of a form and save it using file saver, but I still dont know how to do it programatically, I have the data in memory , not in a form. Can you tell me how to do it with just code without the form? thanks — , Feb 24 '14 at 19:31
I see. In that case, this could be of help: https://developer.mozilla.org/en-US/docs/Web/API/File — gat, Feb 24 '14 at 19:33
Hi , that link you sent me says it only works on IE 10. I need something that will work on IE 8 , 9 and more. — , Feb 24 '14 at 19:37
okay, can you explain to me in code how to do what the first code I added here does except using the Blob.js instead of BlobBuilder.js and without a form ? I would really appreciate those two or three lines of code, I cant seem to figure it out. I assume you are saying that filesaver.js is not a solution for IE 8 or 9 though, so I will try another work around for that. — , Feb 24 '14 at 19:42
Basically what I have to do is I am receiving a json file and I need to be able to have the user download part of it as a file . I cant have any of the data on the server at any time. Thanks — , Feb 24 '14 at 19:44
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/48302/discussion-between-diana-castillo-and-gat) — , Feb 24 '14 at 20:00

score 50 · Accepted Answer · edited Sep 20 '17 at 15:15

50

Just as example from github, it works. https://github.com/eligrey/FileSaver.js

<script src="FileSaver.js"></script>
<script type="text/javascript">
    var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
    saveAs(blob, "hello world.txt");
</script>

edited Sep 20 '17 at 15:15

Ilyas karim

4,592
4
33
47

answered Aug 07 '14 at 15:13

tizzac

516
5
4

Is there a ReactJS native method? – Albert Lazaro de Lara Aug 20 '18 at 13:35
Can anyone provide me a working code to download a file in a userdefined directory – gautam Apr 03 '20 at 10:12
How to save on a specific path? – blackman May 12 '20 at 12:55
its working only first time. I have implemented it on button click and its working only for first time. – Muneem Habib May 24 '21 at 13:25
Where, then, do you find the file "hello world.txt" ?? [on MacOS, for example] – Jack Punt Jun 05 '22 at 22:19

score 19 · Answer 2 · answered Sep 12 '16 at 06:29

19

It works in my react project:

import FileSaver from 'file-saver';
// ...
onTestSaveFile() {
    var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
    FileSaver.saveAs(blob, "hello world.txt");
}

answered Sep 12 '16 at 06:29

navibator

190
1
5

Works in my Angular 2/4 project too. – mdziob Aug 03 '17 at 09:23
2

Perfect! Works for Vue.JS – CodeHacker Aug 21 '17 at 08:33
2

i'm using `import {saveAs} from 'file-saver';` in Aurelia. – mujimu Feb 28 '18 at 20:49
I tried exactly this. In Chrome, I get "failed - No file." – Dave Munger Jan 31 '22 at 18:37

Ilyas karim · Answer 3 · 2021-08-17T08:17:35.667

Here is a guide to JSZIP to create ZIP files by JavaScript. To download files you need to have filesaver.js, You can include those libraries by:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js"  type="text/javascript"></script>
<script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.js" ></script>

Now copy this code and this code will download a zip file with a file hello.txt having content Hello World. If everything thing works fine, this will download a file.

<script type="text/javascript">
    var zip = new JSZip();
    zip.file("Hello.txt", "Hello World\n");
    zip.generateAsync({type:"blob"})
    .then(function(content) {
        // see FileSaver.js
        saveAs(content, "file.zip");
    });
</script>

Now let's get in to deeper. Create an instance of JSZip.

var zip = new JSZip();

Add a file with a Hello World text:

zip.file("hello.txt", "Hello World\n");

Download the filie with name archive.zip

zip.generateAsync({type:"blob"}).then(function(zip) {
    saveAs(zip, "archive.zip");
});

Read More from here: https://www.wapgee.com/post/5/

This is awsome !! Just a quick question , Do you know how to read a zip file which is in my project directory in React or javascript except nodejs — Thanveer Shah, Jun 30 '20 at 00:50
Thanks for your answer, but I was actually able to do it with the same package — Thanveer Shah, Nov 11 '20 at 12:10

score 4 · Answer 4 · answered Feb 25 '14 at 16:36

wll it looks like I found the answer, although I havent tested it yet

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");

from this page https://github.com/eligrey/FileSaver.js

score 2 · Answer 5 · answered Aug 20 '19 at 17:54

For people who want to load it in the console :

var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js';
document.body.appendChild(s);

Then :

saveAs(new Blob([data], {type: "application/octet-stream ;charset=utf-8"}), "video.ts")

File will be save when you're out of a breakpoint (at least on Chrome)

score 1 · Answer 6 · answered Nov 01 '18 at 03:22

https://github.com/koffsyrup/FileSaver.js#examples

Saving text(All Browsers)

saveTextAs("Hi,This,is,a,CSV,File", "test.csv");
saveTextAs("<div>Hello, world!</div>", "test.html");

Saving text(HTML 5)

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");

How to use filesaver.js

6 Answers6

Linked