FileSaver.js

You can install file-saver using npm or bower. If you are using TypeScript, you should also install the type definitions separately.

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

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

You can pass a URL directly to saveAs().

• For same-origin URLs, it uses the a[download] attribute.
• For cross-origin URLs, it attempts a synchronous HEAD request to check for CORS headers. If CORS is supported, it downloads the data and saves it using blob URLs. Otherwise, it falls back to a[download].

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

To save text, create a Blob with the appropriate MIME type (e.g., text/plain;charset=utf-8) and pass it to saveAs().

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

You can pass a File constructor directly to saveAs(). If the file already contains a name, you can omit the second argument, or provide a new name in the second argument to override it.

Note: Since IE and Edge do not support the File constructor, it is safer to use saveAs(blob, filename) for maximum compatibility.

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

To save a canvas, use the canvas.toBlob() method and pass the resulting blob to saveAs(). Note that for older browsers, you may need the canvas-toBlob.js polyfill.

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

The primary way to save files is via the saveAs() function. It accepts a Blob, File, or URL, an optional filename, and an optional configuration object.

Signature: FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })

Options:

• autoBom: Pass { autoBom: true } to automatically provide Unicode text encoding hints (Byte Order Mark). This only works if your blob type has charset=utf-8 set.

import { saveAs } from 'file-saver';

// Basic usage
saveAs(blob, 'filename.txt');

// With autoBom
saveAs(blob, 'filename.txt', { autoBom: true });

FileSaver.js relies on the Blob construct. Feature detection can be performed using:

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

Platform Specifics

• iOS: saveAs must be triggered by a user interaction (e.g., onClick or onTouchDown). Using setTimeout will prevent the download from triggering. On iOS, saveAs may open in a new window instead of downloading.
• Safari 6.1+: Blobs may sometimes open instead of saving. Users may need to manually press ⌘+S to save. Avoid using application/octet-stream as it can cause issues in Safari.
• IE < 10: Does not support the File constructor or Blob natively. For text files, consider using specific saveTextAs() implementations.