这是著名开源项目 FileSaver.js 的 README.md,我把它翻译成中文。发出来,方便自己和他人阅读。

项目地址:https://github.com/eligrey/FileSaver.js

如果你需要保存较大的文件,不受 blob 的大小限制或内存限制,可以看一下更高级的 StreamSaver.js

它使用强大的 stream API,可以将数据直接异步地保存到硬盘。支持进度、取消操作以及完成事件回调。

FileSaver.js

FileSaver.js 在没有原生支持 saveAs() 的浏览器上实现了 saveAs() 接口。有一个 FileSaver.js 示例,演示如何保存各种媒体类型。

FileSaver.js 是在客户端保存文件的解决方案,非常适合需要生成文件,或者保存不应该发送到外部服务器的敏感信息的 web App。

你还在寻找 canvas.toBlob() 来保存画布?canvas-toBlob.js 可以跨浏览器实现这个功能。

支持的浏览器

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 500 MiB None
Chrome for Android Blob Yes 500 MiB 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

支持特征检测:

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

IE < 10

可以在 IE < 10 的浏览器实现保存文本文件,而不需要基于 Flash 的 polyfill。

点击 ChenWenBrian and koffsyrup's saveTextAs() 查看更多详情。

Safari 6.1+

有时候 Blob(要保存的文件) 可能会被浏览器直接打开而不是保存,如果文件在浏览器上打开了,你需要指导 Safari 用户手动按 ⌘ + S 保存文件。 使用 application/octet-stream MIME 类型强制下载在 Safari 会导致出现问题

iOS

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

如果您想修复这个问题,请告诉苹果这个 bug 是如何影响你的。

语法

FileSaver saveAs(Blob/File data, optional DOMString filename, optional Boolean disableAutoBOM)

如果不希望 FileSaver.js 自动提供 Unicode 文本编码提示(参见:字节顺序标记),请将 disableAutoBOM 参数设置为 true。

示例

使用 require 保存文本

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

保存文本

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

标准 W3C 文件 API Blob 接口不兼容所有浏览器。

Blob.js 是一个跨浏览器的 Blob 实现,可以解决兼容性问题。

保存画布(canvas)

var canvas = document.getElementById("my-canvas"), ctx = canvas.getContext("2d");
// draw to canvas...
canvas.toBlob(function(blob) {
saveAs(blob, "pretty image.png");
});

注意:标准的 HTML5 canvas.toBlob() 方法不兼容所有浏览器。

canvas-toBlob.js 是一个跨浏览器的实现 canvas.toBlob() 的 polyfill 方案。

保存文件

你可以保存一个文件结构,不需要指定文件名。文件自身已经包含了文件名,有一些方法来获取文件实例(从 storage,file input,新的构造函数)

如果你想修改文件名,你可以在第二个参数设置文件名。

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

贡献

FileSaver.js 的发布文件使用 Uglify.js 编译生成,就像这样:

uglifyjs FileSaver.js --mangle --comments /@source/ > FileSaver.min.js
# or simply:
npm run build

在提交请求之前,请确保已经生成了生产版本。

安装

npm install file-saver --save
bower install file-saver

此外,如果要安装 Typscript 声明,可以这样做:

npm install @types/file-saver --save-dev

FileSaver.js 介绍的更多相关文章

  1. FileSaver.js ////////////////////zzzzzzzzzzzzzz

    FileSaver.js 实现浏览器端文件保存的 JavaScript 库 查看次数: 758 下载次数: 89 更新时间: 2015-06-05 发布时间: 2015-06-05 收藏 插件信息金币 ...

  2. Vue.js介绍

    http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思 ...

  3. js介绍

    ---恢复内容开始--- js介绍 最近学习了js,那么我今天给大家介绍下js.希望对初学者有些帮助. js就是常说的JavaScript.JavaScript是目前世界上最流行的编程语言之一.这门语 ...

  4. FileSaver.js 文件下载

    安装: npm install file-saver --save 或者(需下载FileSaver.js文件) <script src="path/FileSaver.js" ...

  5. js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  6. node.js介绍和npm的使用

    Node.js介绍 打开Nodejs英文网:https://nodejs.org/en/ 中文网:http://nodejs.cn/ 我们会发现这样一句话: 翻译成中文如下: Node.js 是一个基 ...

  7. FileSaver.js 实现浏览器文件导出

    FileSaver.js 实现浏览器文件导出 在浏览器中用 FileSaver.js 可以下载文件,不会造成文件直接打开等情况

  8. FileSaver.js 浏览器导出Excel文件

    限制一:不同浏览器对 blob 对象有不同的限制 具体看看下面这个表格(出自 FileSaver.js): Browser Constructs as Filenames Max Blob Size ...

  9. Node.js 介绍及安装

    Node.js是一个Javascript运行环境(runtime environment),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.本文详细介绍了No ...

随机推荐

  1. Liunx的常用命令

    常用指令 ls 显示文件或目录 -l 列出文件详细信息l(list) -a 列出当前目录下所有文件及目录,包括隐藏的a(all) mkdir 创建目录 -p 创建目录,若无父目录,则创建p(paren ...

  2. CentOS6.5安装MySQL5.6

    CentOS6.5安装MySQL5.6,开放防火墙3306端口,允许其他主机使用root账户密码访问MySQL数据库 查看操作系统相关信息 ** 该查看方法只适用于CentOS6.5 (lsb_rel ...

  3. 关于在Windows下Composer下载安装Yii2.0

    先是composer的安装,主要有两个方式,一个直接下载安装包安装,Composer-steup.exe文件,第二种直接下载composer.phar文件,用php去运行这个文件可以一样起到作用,之后 ...

  4. 【功能代码】---4用JS获取地址栏参数方法

    用JS获取地址栏参数方法 // 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new Reg ...

  5. 浅谈Unix I/O模型

    关于I/O模型的文章比较多,参考多篇后理解上仍然不太满意,终需自己整理一次,也是编写高吞吐量高性能网络接口模块的基础.这里所说的主要针对网络I/O,近几年面对越来越大的用户请求量,如何优化这些步骤直接 ...

  6. Ubuntu14.04下安装 boost (boost_1.54 最简单的方法)

    直接执行命令: sudo apt-get  install libboost-dev 测试: 创建一个 boost_test.cpp 文件,写入 #include<iostream> #i ...

  7. [Mean of range in array]

    Given an array of n integers and q queries. Write a program to print floor value of mean in range l  ...

  8. 欢迎大家走进我的园子 ( ^___^ )y 本博客文章目录整理

    "记录"是见证成长:"成长"则意味着蜕变:“变",创造无限可能! ------致自己 文章越来越多,不容易查看,特整理了一个目录,方便快速查找 坚持的是分享,搬运的是知识,图的是大家的进步,欢迎更多的 ...

  9. Effective Java 第三版——13. 谨慎地重写 clone 方法

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  10. 对 Java 集合的巧妙利用

    我们直接切入正题.首先大致介绍一下 Java 三大集合的一些特征: ①.ArrayList:底层采用数组结构,里面添加的元素有序可以重复. ②.HashSet:底层采用哈希表算法,里面添加的元素无序不 ...