FileSaver.js — Save Files from the Browser with JavaScript

Introduction

FileSaver.js implements the HTML5 saveAs() function in browsers that do not natively support it. It enables web applications to generate files entirely on the client side and prompt the user to download them. This eliminates the need for a server endpoint just to serve dynamically created content like reports, exports, or generated images.

What FileSaver.js Does

• Triggers a browser download dialog for any Blob or File object
• Supports custom filenames for the downloaded file
• Works across modern browsers with automatic fallback strategies
• Handles large files via streaming on supported browsers
• Integrates with canvas, fetch responses, and other Blob sources

Architecture Overview

FileSaver.js wraps the a[download] attribute approach as its primary mechanism. It creates a temporary anchor element, sets its href to an object URL created from the Blob, assigns the desired filename to the download attribute, and programmatically clicks it. For older browsers, it falls back to opening the Blob URL in a new window. The library is distributed as a UMD module and has zero dependencies.

Self-Hosting & Configuration

• Install via npm or include the script tag from a CDN
• Import the named export saveAs from the package
• Pass a Blob (or File) and a filename string to saveAs(blob, filename)
• For canvas elements, use canvas.toBlob() then pass the result to saveAs
• Set autoBom: true in options to prepend a UTF-8 BOM for CSV exports

Key Features

• Zero-dependency, under 3KB minified implementation
• Works with any content type: text, JSON, CSV, images, PDFs, ZIP archives
• Automatic object URL cleanup to prevent memory leaks
• Supports the StreamSaver.js companion for files larger than available RAM
• Compatible with all modern browsers and IE10+

Comparison with Similar Tools

• StreamSaver.js — companion project for streaming large files to disk; FileSaver.js buffers in memory
• download.js — similar approach but less maintained and smaller community
• Native Blob + anchor trick — the raw technique FileSaver.js polishes with cross-browser handling
• Server-side download endpoints — necessary for authenticated content; FileSaver.js handles client-generated data

FAQ

Q: What is the maximum file size? A: Browser-dependent. Chrome and Firefox handle files up to around 2GB. For larger files, use StreamSaver.js which writes directly to disk via a Service Worker.

Q: Can I save a fetch response as a file? A: Yes. Await response.blob() and pass the resulting Blob to saveAs.

Q: Does it work on mobile browsers? A: Yes on most modern mobile browsers. iOS Safari may open the file in a new tab rather than triggering a download for certain MIME types.

Q: Can I control the MIME type? A: Yes. Set the type property when constructing the Blob, e.g. new Blob([data], { type: 'application/pdf' }).

Sources

• https://github.com/eligrey/FileSaver.js
• https://eligrey.com/blog/saving-generated-files-on-the-client-side