我有想要写入文件的数据,并打开一个文件对话框供用户选择保存文件的位置。如果它能在所有浏览器中工作就太好了,但它必须在Chrome中工作。我想在客户端完成。

基本上我想知道在这个函数里放什么

saveFile: function(data)
{
}

函数接收数据,让用户选择保存文件的位置,并在该位置用该数据创建一个文件。

如果有帮助的话,使用HTML也很好。


当前回答

对于最新的浏览器,如Chrome,你可以使用本教程中的文件API:

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.PERSISTENT, 5*1024*1024 /*5MB*/, saveFile, errorHandler);

其他回答

Awesomeness01对代码的一个非常小的改进(不需要锚标签),增加了trueimage的建议(支持IE):

// Function to download data to a file
function download(data, filename, type) {
    var file = new Blob([data], {type: type});
    if (window.navigator.msSaveOrOpenBlob) // IE10+
        window.navigator.msSaveOrOpenBlob(file, filename);
    else { // Others
        var a = document.createElement("a"),
                url = URL.createObjectURL(file);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);  
        }, 0); 
    }
}

测试在Chrome, FireFox和IE10中正常工作。

在Safari中,数据在一个新选项卡中打开,必须手动保存该文件。

你不能单纯地在Javascript中做到这一点。由于安全原因,Javascript在浏览器上运行还没有足够的权限(已经提出了建议)。

相反,我建议使用downadify:

一个微小的javascript + Flash库,可以创建和下载文本文件,无需服务器交互。

您可以在这里看到一个简单的演示,其中提供内容并测试保存/取消/错误处理功能。

对于最新的浏览器,如Chrome,你可以使用本教程中的文件API:

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.PERSISTENT, 5*1024*1024 /*5MB*/, saveFile, errorHandler);

这个项目在github上看起来很有前途:

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

中的FileSaver.js实现了W3C saveAs() FileSaver接口 本机不支持的浏览器。

也可以看看这里的演示:

http://eligrey.com/demos/FileSaver.js/

在控制台中尝试了这一点,并且它可以工作。

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob
window.open(URL.createObjectURL(oMyBlob));