Question

我正在开发一个完全本地运行的Web应用程序，该应用程序无需任何网络连接即可运行。我们的想法是向用户（~40）分发一个包，他们将使用该应用程序基本上填写一堆表单字段和图表。当对页面进行更改时，将填充具有JSON格式数据的对象。我现在页面运行良好，并且我有一个函数来加载现有的JSON文件并填充文件中存在的任何字段。这背后的想法是有人可以在半途而废＃34;通过填写应用程序中的字段或某人可以加载以前的工作。

我的问题是;什么是最好的系统可用于从网页获取数据到JSON文件，并能够将其保存到本地计算机，以便以后可以分发（通过电子邮件发送，保存到SP，网络驱动器，访问数据库等）？应用程序将使用的场景是严格的无网络访问区域，因此这就是我需要能够在本地保存和访问文件的原因。我有一个半解决方案，我可以打开一个单独的选项卡，其中包含文件的内容但我真的更愿意为我完成下载/保存提示，因为大多数用户不会比看到一个页面更进一步胡言乱语。

我必须完成的代码是：

//Download file
function SaveToDisk() {
    var data = JSON.stringify(currentSession);
    var fileURL = 'data:text/json;charset=utf8,' + encodeURIComponent(data);
    var fileName = $('file-save').val();
    console.log(fileURL);

    // for non-IE
    if (!window.ActiveXObject) {
        var save = document.createElement('a');
        save.href = fileURL;
        save.target = '_blank';
        save.download = fileName || 'unknown';

        var event = document.createEvent('Event');
        event.initEvent('click', true, true);
        save.dispatchEvent(event);
        (window.URL || window.webkitURL).revokeObjectURL(save.href);
    }

    // for IE
    else if ( !! window.ActiveXObject && document.execCommand)     {
        var _window = window.open(fileURL, '_blank');
        _window.document.close();
        _window.document.execCommand('SaveAs', true, fileName || fileURL)
        _window.close();
    }
}

currentSession对象如下所示：

//Global JSON variables
var currentSession = {
    "sections":{
        "header":{
            "tool":"",
            "subsystem":"",
            "engineer":"",
            "date":"",
            "so":""

        },
        "whys":{
            "why1":{
                "error":"",
                object:"",
                norm:"",
            },
            why2:{
                error:"",
                object:"",
                norm:"",
            },
            why3:{
                error:"",
                object:"",
                norm:"",
            },
            why4:{
                error:"",
                object:"",
                norm:"",
            },
            why5:{
                error:"",
                object:"",
                norm:"",
            }
        },
        probDescription:{
            "F":{
                "is":"",
                "isnot":""
            },
            "O":{
                "is":"",
                "isnot":""
            },
            "T":{
                "is":"",
                "isnot":""
            },
            "L":{
                "is":"",
                "isnot":""
            },
            "P":"",
            "W":"",
            "Pos":"",
            "S":""
        },
        possibleCauses :{
            "data":""
        },
        notes: ""
    }
};

更新：在IE9上尝试在Windows机器上（到目前为止在mac上测试）会出现以下错误：

SCRIPT5007: Unable to get value of the property 'document': object is null or undefined

在上面代码的以下行：

        _window.document.close();

在检查之前：

    // for IE
    else if ( !! window.ActiveXObject && document.execCommand)     {

告诉我if语句检查activeXObject是否存在（仅在IE ???中）和其他东西（div editable ???）为真，然后它与IE解决方案一起使用。

然后它会创建一个包含数据网址的新窗口（不确定＆＃39; _blank＆＃39;在这里）并尝试保存文件。那么为什么_window.document行会出错呢？它确实打开一个新窗口，其URL为：

data:application/octet-stream;{data}

这里的任何帮助也非常感谢（和需要）

所有的帮助和建议都很高兴，因为我对这一切都很陌生并且还在学习。

提前谢谢

Answer 1

要强制下载/保存提示，您可以将MIME类型更改为application / octet-stream。 MIME类型不会保存到磁盘，因此您以后不必担心。因此，函数中的第二行应为：

var fileURL = 'data:application/octetstream;charset=utf8,' +  encodeURIComponent(data);

当然，有充分的理由认为这种本地保存程序无法完全自动化。否则病毒很容易分发。

如果您想稍后访问该文件以通过电子邮件分发，html5中的本地存储解决方案实际上并没有帮助。

Answer 2

由于我主要在IE9上工作并且可以保证用户会使用这个，我发现这个答案解决了我的问题：

https://stackoverflow.com/a/6106417/1770604

我实现它是这样的：

//Make file for attaching to mail
function makefile () {

    var fso = new ActiveXObject("Scripting.FileSystemObject"),
        FName = $('#file-save').val() + ".json",
        data = JSON.stringify(currentSession),
        thefile=fso.CreateTextFile("C:\\temp\\" + FName,true);

    thefile.Write(data);
    thefile.Close();
    alert("File created and saved to C:/temp/directory");
}

我已经尽可能多地进行了搜索，而且据我所知，只有两种解决方案，而不使用单独的服务器：

IE9中的ActiveXObject允许用户与文件系统交互并写入指定目录中的文件 - 从我所读到的这不是一个非常安全的解决方案，但这是我唯一真正的选择。
某种形式的本地/便携式网络服务器可以在没有用户需要做任何事情的情况下进行分发和启动 - 我还没有找到这个问题的答案，所以会继续寻找，但请考虑回答的问题现在只要你使用IE9。

将网页数据保存到本地文件：如何将网页中的数据转换为JSON文件，并将其保存到本地计算机

2 个答案: