分享每一天-H5 实现在浏览器直接保存文件—

H5 实现在浏览器直接保存文件——FileSaver.js

前端技术 4099 0 创建时间：2020-09-22 14:37:15

FileSaver.js是一个HTML5 saveAs（）FileSaver实现，它是在客户端保存文件的解决方案，非常适合在客户端生成文件的web应用程序！

#### github:
**https://github.com/eligrey/FileSaver.js**

#### 支持的浏览器

![](http://www.seedblog.cn/uploads/article/2020-09-22/AXuiwfFrDAYczahhkKxKTGPMnNvynd0199lpyBN9.png)

可以用以下方法来进行特征检测

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

#### <IE10

不使用Flash-based polyfillsFlash，可以在IE<10中保存文本文件。

#### Safari6.1+

blob可能会被打开而不是保存有时您可能需要指示您的Safari用户手动按⌘+S保存文件。使用application/octet stream MIME类型强制下载可能会导致Safari出现问题。

#### iOS

saveAs必须在用户交互事件（如onTouchDown或onClick）中运行；setTimeout将阻止saveAs触发。由于iOS中的限制，saveAs会在新窗口中打开而不是下载

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

#### 使用require

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

#### 保存URL

```javascript
FileSaver.saveAs("https://。。。/image", "image.jpg");
```

在同一个源中使用url只需使用[download]。否则，它将首先检查是否支持cors头和同步头请求。如果有，它将下载数据并使用blob url保存。如果没有，它将尝试使用[下载]下载它。

标准的W3C文件API Blob接口并非在所有浏览器中都可用。Blob.js是一个解决此问题的跨浏览器Blob实现。

#### 保存canvas

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

标准HTML5画布.toBlob（）方法并非在所有浏览器中都可用。 canvas-toBlob.js是一个跨浏览器canvas.toBlob()的实现

#### 安装

```javascript
npm install file-saver --save
bower install file-saver
```

其他类似的方案
FileSaver.js即便已经满足很多需求，但是也仍然是会有些限制，比如大小限制，特别是移动端。StreamSaver.js是在客户端保存流的解决方案。对于需要保存在客户端创建的大量数据的webapps来说，它是完美的，因为客户端的RAM非常有限，比如在移动设备上。

https://github.com/jimmywarting/StreamSaver.js

```javascript

H5 实现在浏览器直接保存文件——FileSaver.js

商品推荐

广告推荐

推荐文章