# FileSaver.js — Save Files from the Browser with JavaScript

> An HTML5 saveAs() implementation that lets web applications generate and download files on the client side without any server round-trip.

## Install

Save as a script file and run:

# FileSaver.js — Save Files from the Browser with JavaScript

## Quick Use
```bash
npm install file-saver
```
```js
import { saveAs } from 'file-saver';
const blob = new Blob(["Hello world"], { type: "text/plain;charset=utf-8" });
saveAs(blob, "hello.txt");
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-4df22650
Author: Script Depot