file-saver vs downloadjs vs blob-stream vs streamsaver
File Downloading in Web Applications Comparison
1 Year
file-saverdownloadjsblob-streamstreamsaverSimilar Packages:
What's File Downloading in Web Applications?

File downloading libraries in JavaScript provide developers with tools to programmatically trigger file downloads in web applications. These libraries handle various file types, including text, images, and binary data, and offer features like creating downloadable links, handling blobs (binary large objects), and supporting both client-side and server-side file generation. They simplify the process of generating and downloading files directly from the browser, making them essential for applications that require exporting data, generating reports, or allowing users to download content dynamically. blob-stream is a library that creates a writable stream that emits a Blob when finished, allowing for efficient blob creation from streaming data. downloadjs is a lightweight library that simplifies the process of triggering file downloads in the browser, supporting various data types and providing a simple API for creating downloadable links. file-saver is a widely used library that enables saving files on the client side, supporting Blob and File objects, and providing a consistent API across different browsers, including those with limited support for the HTML5 download attribute. streamsaver is a library that allows streaming data to be saved as a file in the browser, using the Streams API to handle large data sets efficiently and enabling progressive downloading while the data is being generated.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
file-saver3,513,60121,769-2104 years agoMIT
downloadjs317,9102,301-498 years agoMIT
blob-stream114,227120-310 years agoMIT
streamsaver43,342-61.2 kB--MIT
Feature Comparison: file-saver vs downloadjs vs blob-stream vs streamsaver

File Creation Method

  • file-saver:

    file-saver handles file creation by accepting Blob, File, or URL objects and triggering a download. It provides a consistent API for saving files, regardless of the data type, and handles cross-browser quirks automatically.

  • downloadjs:

    downloadjs does not create files per se; it triggers downloads directly from data URLs, Blob objects, or File objects. It relies on the browser's download capabilities to handle the data provided, making it simple and efficient for small to medium-sized files.

  • blob-stream:

    blob-stream creates a Blob by writing data to a writable stream, which is especially efficient for large or streaming data. This method allows for incremental data writing, reducing memory usage since the entire file does not need to be loaded at once.

  • streamsaver:

    streamsaver allows for streaming data to a file as it is being generated, using the Streams API. This method is particularly useful for large files, as it writes data in chunks, reducing memory consumption and allowing for progressive downloads.

Browser Compatibility

  • file-saver:

    file-saver offers good cross-browser compatibility, including support for Internet Explorer 10 and above. It handles various browser quirks related to file downloading, making it reliable for applications that need to support a range of environments.

  • downloadjs:

    downloadjs is designed to work across all modern browsers, including those that support the HTML5 download attribute. It also provides fallbacks for older browsers, making it a versatile choice for wide compatibility.

  • blob-stream:

    blob-stream is compatible with modern browsers that support the Blob and Stream APIs. However, it may not work in older browsers that lack support for these features.

  • streamsaver:

    streamsaver is compatible with modern browsers that support the Streams API. Its functionality may be limited in older browsers, but it is designed to work with the latest web standards for efficient data streaming.

Memory Usage

  • file-saver:

    file-saver is efficient in handling memory, especially when working with Blob and File objects. It does not load the entire file into memory before downloading, which helps reduce memory consumption during the file-saving process.

  • downloadjs:

    downloadjs has minimal memory usage since it triggers downloads directly from data URLs or Blob objects without storing the entire file in memory. However, the memory usage depends on the size of the data being downloaded.

  • blob-stream:

    blob-stream is memory-efficient as it writes data to a Blob incrementally, which is ideal for handling large files or streaming data without consuming excessive memory.

  • streamsaver:

    streamsaver is designed for low memory usage when dealing with large data sets, as it streams data in chunks rather than loading the entire file at once. This makes it suitable for applications that need to handle large files without overwhelming the browser's memory.

Ease of Use: Code Examples

  • file-saver:

    Saving a File with file-saver

    import { saveAs } from 'file-saver';
    
    // Create a Blob
    const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
    const filename = 'example.txt';
    
    // Save the file
    saveAs(blob, filename);
    
  • downloadjs:

    Triggering a File Download with downloadjs

    import download from 'downloadjs';
    
    // Data to be downloaded
    const data = 'Hello, world!';
    const filename = 'hello.txt';
    
    // Trigger the download
    download(data, filename);
    
  • blob-stream:

    Creating a Blob from a Stream with blob-stream

    const blobStream = require('blob-stream');
    const stream = blobStream();
    
    // Write data to the stream
    stream.write('Hello, ');
    stream.write('world!');
    stream.end();
    
    // Create a Blob from the stream
    const blob = stream.toBlob();
    
    // Create a download link
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'example.txt';
    document.body.appendChild(a);
    
    a.click();
    
    // Clean up
    URL.revokeObjectURL(url);
    document.body.removeChild(a);
    
  • streamsaver:

    Streaming Data to a File with streamsaver

    import { WritableStream } from 'streams';
    import { streamSaver } from 'streamsaver';
    
    // Create a writable stream
    const stream = streamSaver.createWriteStream('large-file.txt');
    const writer = stream.getWriter();
    
    // Write data to the stream
    for (let i = 0; i < 100; i++) {
      writer.write(`Chunk ${i}\n`);
    }
    
    writer.close();
    
How to Choose: file-saver vs downloadjs vs blob-stream vs streamsaver
  • file-saver:

    Choose file-saver if you need a robust solution for saving files on the client side, with support for both Blob and File objects. It is especially useful for applications that require cross-browser compatibility and a consistent experience for users when downloading files.

  • downloadjs:

    Choose downloadjs for a lightweight and straightforward solution to trigger file downloads with minimal setup. It is ideal for projects that need a simple API to handle downloads without the overhead of additional features.

  • blob-stream:

    Choose blob-stream if you need to create a Blob from streaming data, such as when working with large files or real-time data streams. It is particularly useful for applications that require efficient memory usage and want to avoid loading the entire file into memory before downloading.

  • streamsaver:

    Choose streamsaver if you are dealing with large data sets and want to save them progressively as they are being generated. It is ideal for applications that utilize the Streams API and need to handle data efficiently without consuming excessive memory.

README for file-saver

If you need to save really large files bigger than the blob's size limitation or don't have enough RAM, then have a look at the more advanced StreamSaver.js that can save data directly to the hard drive asynchronously with the power of the new streams API. That will have support for progress, cancelation and knowing when it's done writing

FileSaver.js

FileSaver.js is the solution to saving files on the client-side, and is perfect for web apps that generates files on the client, However if the file is coming from the server we recommend you to first try to use Content-Disposition attachment response header as it has more cross-browser compatiblity.

Looking for canvas.toBlob() for saving canvases? Check out canvas-toBlob.js for a cross-browser implementation.

Supported Browsers

| Browser | Constructs as | Filenames | Max Blob Size | Dependencies | | -------------- | ------------- | ------------ | ------------- | ------------ | | Firefox 20+ | Blob | Yes | 800 MiB | None | | Firefox < 20 | data: URI | No | n/a | Blob.js | | Chrome | Blob | Yes | 2GB | None | | Chrome for Android | Blob | Yes | RAM/5 | None | | Edge | Blob | Yes | ? | None | | IE 10+ | Blob | Yes | 600 MiB | None | | Opera 15+ | Blob | Yes | 500 MiB | None | | Opera < 15 | data: URI | No | n/a | Blob.js | | Safari 6.1+* | Blob | No | ? | None | | Safari < 6 | data: URI | No | n/a | Blob.js | | Safari 10.1+   | Blob         | Yes         | n/a           | None |

Feature detection is possible:

try {
    var isFileSaverSupported = !!new Blob;
} catch (e) {}

IE < 10

It is possible to save text files in IE < 10 without Flash-based polyfills. See ChenWenBrian and koffsyrup's saveTextAs() for more details.

Safari 6.1+

Blobs may be opened instead of saved sometimes—you may have to direct your Safari users to manually press +S to save the file after it is opened. Using the application/octet-stream MIME type to force downloads can cause issues in Safari.

iOS

saveAs must be run within a user interaction event such as onTouchDown or onClick; setTimeout will prevent saveAs from triggering. Due to restrictions in iOS saveAs opens in a new window instead of downloading, if you want this fixed please tell Apple how this WebKit bug is affecting you.

Syntax

Import saveAs() from file-saver

import { saveAs } from 'file-saver';
FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })

Pass { autoBom: true } if you want FileSaver.js to automatically provide Unicode text encoding hints (see: byte order mark). Note that this is only done if your blob type has charset=utf-8 set.

Examples

Saving text using require()

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

Saving text

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

Saving URLs

FileSaver.saveAs("https://httpbin.org/image", "image.jpg");

Using URLs within the same origin will just use a[download]. Otherwise, it will first check if it supports cors header with a synchronous head request. If it does, it will download the data and save using blob URLs. If not, it will try to download it using a[download].

The standard W3C File API Blob interface is not available in all browsers. Blob.js is a cross-browser Blob implementation that solves this.

Saving a canvas

var canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob) {
    saveAs(blob, "pretty image.png");
});

Note: The standard HTML5 canvas.toBlob() method is not available in all browsers. canvas-toBlob.js is a cross-browser canvas.toBlob() that polyfills this.

Saving File

You can save a File constructor without specifying a filename. If the file itself already contains a name, there is a hand full of ways to get a file instance (from storage, file input, new constructor, clipboard event). If you still want to change the name, then you can change it in the 2nd argument.

// Note: Ie and Edge don't support the new File constructor,
// so it's better to construct blobs and use saveAs(blob, filename)
var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(file);

Tracking image

Installation

# Basic Node.JS installation
npm install file-saver --save
bower install file-saver

Additionally, TypeScript definitions can be installed via:

# Additional typescript definitions
npm install @types/file-saver --save-dev