FileSaver.js 介绍
这是著名开源项目 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 介绍的更多相关文章
- FileSaver.js ////////////////////zzzzzzzzzzzzzz
FileSaver.js 实现浏览器端文件保存的 JavaScript 库 查看次数: 758 下载次数: 89 更新时间: 2015-06-05 发布时间: 2015-06-05 收藏 插件信息金币 ...
- Vue.js介绍
http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思 ...
- js介绍
---恢复内容开始--- js介绍 最近学习了js,那么我今天给大家介绍下js.希望对初学者有些帮助. js就是常说的JavaScript.JavaScript是目前世界上最流行的编程语言之一.这门语 ...
- FileSaver.js 文件下载
安装: npm install file-saver --save 或者(需下载FileSaver.js文件) <script src="path/FileSaver.js" ...
- js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- node.js介绍和npm的使用
Node.js介绍 打开Nodejs英文网:https://nodejs.org/en/ 中文网:http://nodejs.cn/ 我们会发现这样一句话: 翻译成中文如下: Node.js 是一个基 ...
- FileSaver.js 实现浏览器文件导出
FileSaver.js 实现浏览器文件导出 在浏览器中用 FileSaver.js 可以下载文件,不会造成文件直接打开等情况
- FileSaver.js 浏览器导出Excel文件
限制一:不同浏览器对 blob 对象有不同的限制 具体看看下面这个表格(出自 FileSaver.js): Browser Constructs as Filenames Max Blob Size ...
- Node.js 介绍及安装
Node.js是一个Javascript运行环境(runtime environment),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.本文详细介绍了No ...
随机推荐
- Java的流程控制结构,细节详解
位运算符 &与 |或 ^异或 <<左移 >>右移 >>>无符号右移 ~取反 注意:位运算是针对整数运算的 int i = 6,j = 10; 方式一 ...
- VirtualBox 安装 Ubuntu 14.04 无法调节分辨率问题
基础环境 宿主系统:Windows 10 虚拟机系统:Ubuntu 14.04-32bit.Ubuntu 14.04-64bit VirtualBox:5.2.0 r118431 (Qt5.6.2) ...
- EJB:快速入门
1.EJB概念 2.EJB体系结构 3.SessionBean 3.1 SessionBean 服务端组件 3.2 Remote 与 Local 模式 3.3 Client访问处理流程 3.3.1 R ...
- Intellij IDEA设置运行时Java参数
1.选中类,点击顶部菜单:Run-->Edit Configuration,如下所示: 2.选择Application,指定的类,在右边选择Configuration,并在VM options中 ...
- 修改Intellij IDEA中工程对应的Java SDK、Scala SDK
如果编译Scala工程时,遇到如下异常: can't expand macros compiled by previous versions of Scala 很可能是工程的scala版本,和依赖的包 ...
- git 设置和取消代理
# 设置ss git config --global http.proxy 'socks5://127.0.0.1:1080' git config --global https.proxy 'soc ...
- Pycharm配置(一)
Pycharm作为一款强力的Python IDE,在使用过程中感觉一直找不到全面完整的参考手册,因此决定对官网的Pycharm教程进行简要翻译,与大家分享. 1.准备工作 官网下载 2.如何选择Pyc ...
- Vagrant安装完lnmp后,配置linux和windows共享文件并配置虚拟主机访问项目
虚拟机目录下的Vagrantfile文件是vagrant的配置文件,如果想把虚拟机当作一台服务器,可以通过ip访问,需要修改配置文件进行配置. (1)第一步:打开虚拟机目录下的Vagrantfile文 ...
- vue使用国际化
转载请注明作者与出处 一:安装vue-i18n npm install vue-i18n --save 二:定义不同语言的json语言包 一般把它放到npm工程中的src目录下,因为这个目录是要进行编 ...
- bzoj 4719: [Noip2016]天天爱跑步
Description 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.?天天爱跑步?是一个养成类游戏,需要 玩家每天按时上线,完成打卡任务.这个游戏的地图可以看作一一 ...