html5 保存文件

来源：互联网发布：安徽联通云计算编辑：程序博客网时间：2024/05/29 19:44

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

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

以下提供两个方案：

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";//资源的dataUrlvar 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