将网页数据保存到本地文件：如何从网页获取数据到 JSON 文件并能够将其保存到本地机器

Question

我正在开发一个完全在本地运行的 Web 应用程序，该应用程序无需任何网络连接即可运行。这个想法是向将使用该应用程序基本上填写一堆表单字段和图表的用户（约 40 人）分发一个包。随着对页面的更改，一个带有 JSON 格式数据的对象被填充。我的页面现在运行良好，我有一个函数来加载现有的 JSON 文件并填充文件中存在的任何字段。这背后的想法是，某人可以在填写应用程序中的字段“中途”，或者某人可以加载以前的工作。

我的问题是；什么是可用于从网页获取数据到 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 可编辑？？？）为真，然后它与 IE 解决方案一起使用。

然后它会创建一个带有数据 url 的新窗口（不确定这里的 '_blank' 是什么）并尝试保存文件。那么为什么 _window.document 行会出错呢？它确实会打开一个新窗口，其 URL 为：

data:application/octet-stream;{data} 

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

欢迎所有帮助和建议，因为我对这一切还很陌生，还在学习中。

提前谢谢

Answer 1

由于我主要在 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");
}

我已尽可能多地搜索，据我所知，在不使用单独服务器的情况下，只有两种解决方案：

1. IE9 中的 ActiveXObject 允许用户与文件系统交互并写入指定目录中的文件 - 据我所知，这不是一个非常安全的解决方案，但这是我唯一真正的选择。

2. 某种形式的本地/便携式 Web 服务器，无需用户执行任何操作即可分发和启动 - 我还没有找到此问题的答案，因此会继续寻找，但请考虑已回答的问题现在只要你使用 IE9。

Answer 2

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

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

当然，这个本地保存过程不能完全自动化是有充分理由的。否则病毒很容易传播。

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