html5 保存文件

利用浏览器做一个工具时，往往操作的对象就是文件本身，我们需要打开文件，然后对文件进行处理，最后，将处理后的数据，以文件的形式保存起来

那么：我们怎么保存文件呢？

以下提供两个方案：

1 大家都不陌生，我们在浏览器上经常使用，单击一个链接，启动下载，如下：

function createDownloadLink(dataUrl,fileName){var save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a");save_link.download = fileName;save_link.href = dataUrl;
}

function click = function(node) {var event = doc.createEvent("MouseEvents");event.initMouseEvent("click", true, false, view, 0, 0, 0, 0, 0, false, false, false, false, 0, null);node.dispatchEvent(event);}

var dataUrl = "data:xxxxxxxxxxxxxxxxxxxxxxx";//资源的dataUrl
var saveLink = createDownLoadLink(dataUrl);
click(saveLink);

原理是创建一个下载的链接，将连接的href 用dataUrl赋值。然后触发链接的点击事件，实现下载。

2 利用html5 进行保存文件操作

关键步骤：

var req_fs = view.requestFileSystem || webkit_req_fs || view.mozRequestFileSystem ;

req_fs(window.TEMPORARY, 5*1024*1024,createAndSaveFile);

function createAndSaveFile(fs){
fs.root.getFile('log.txt', {create: true}, function(fileEntry) {// Create a FileWriter object for our FileEntry (log.txt).fileEntry.createWriter(function(fileWriter) {fileWriter.onwriteend = function(e) {console.log('Write completed.');};fileWriter.onerror = function(e) {console.log('Write failed: ' + e.toString());};// Create a new Blob and write it to log.txt.var bb = new BlobBuilder(); // Note: window.WebKitBlobBuilder in Chrome 12.bb.append('Lorem Ipsum');fileWriter.write(bb.getBlob('text/plain'));}, errorHandler);}, errorHandler);}

参考：

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

http://www.html5rocks.com/zh/tutorials/file/filesystem/ 重点

http://stackoverflow.com/questions/13130070/html5-filesystems-api-letting-users-save-files-to-their-actual-filesystem

http://www.html5rocks.com/zh/tutorials/file/filesystem/

http://www.xyhtml5.com/read-and-save-files-using-javascript.html

html5 保存文件相关推荐

允许保存文件 html5,html5 保存文件
利用浏览器做一个工具时,往往操作的对象就是文件本身,我们需要打开文件,然后对文件进行处理,最后,将处理后的数据,以文件的形式保存起来那么:我们怎么保存文件呢? 以下提供两个方案 : 1 大家都不陌生 ...
HTML5 本地文件操作之FileSystemAPI整理（二）
一.文件目录操作 1.DirectoryEntry对象属性: 1.isFile: 操作对象的是否为文件,DirectoryEntry对象固定其值为false 2.isDirectory: 操作对象是 ...
html5页面输出语句,使用html5输出文件
在html5中,我们可以使用canvas.toDataURL("类型");这是实际就是把绘制的图片等等保存到打他URL地址指向的数据中,而不是真正的一个物理地址,但是我们可以通过这 ...
HTML5 本地文件操作之FileSystemAPI整理（一）
一.请求配额 DeprecatedStorageInfo对象 window.webkitStorageInfo:当使用持久存储模式时需要用到该对象的接口方法: 1.requestQuota(type ...
Html5大文件断点续传实现方法
之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...
FileSaver.js 客户端保存文件的解决方案
介绍: FileSaver.js是一个HTML5 saveAs()FileSaver实现,它是在客户端保存文件的解决方案,非常适合在客户端生成文件的web应用程序! 效果: 代码: <!DOCT ...
简述vi编辑器的启动\退出\保存文件
vi是一个特殊的命令,也不光是命令还是Linux下的编辑器,由于篇幅关系就不在这边多做举例说明,讲在以后配置网络服务时介绍一些vi的实际应用. vi命令是Linux下全屏幕文本编辑,vi编辑提供了丰富 ...
Eclipse保存文件时出现字符编码错误
Eclipse保存文件时出现字符编码错误,如下图所示: Ecplise的默认编码,如下图所示: eclipse 由于开源所以支持了比较杂的编码方式,而这些一个工程导入时添加了不少的外来程序,由于不是同 ...
R语言sink函数保存文件实战
R语言sink函数保存文件实战目录 R语言sink函数保存文件实战 #sink函数导出字符串到txt文件

html5 保存文件

html5 保存文件相关推荐

最新文章

热门文章