如何使用 AngularJS 创建文件并将其保存到本地文件系统？

Question

我想在将数据记录到文件之前创建并保存文件。下面的方法是创建和保存数据到文件，只有 Chrome 浏览器支持。如何创建和保存空白文件，然后将数据记录到其中并支持 IE 和 Chrome？

控制.js：

 function download(text, name, type) {
    var a = document.getElementById("a");
    var file = new Blob([text], {type: type});
    a.href = URL.createObjectURL(file);
    a.download = name;
}
$scope.recordLogs = function(){
    download('file text', 'myfilename.txt', 'text/plain')
}

原文由 hussain 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

保存到文件系统

看看 角度文件保护程序

或者使用以下代码作为保存 BLOB 的参考。其中 blob 对象是从 JSON 对象生成的。但是也可以提取到 TEXT 文件。

     // export page definition to json file
    $scope.exportToFile = function(){
        var filename = 'filename'
        var blob = new Blob([angular.toJson(object, true)], {type: 'text/plain'});
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(blob, filename);
        } else{
            var e = document.createEvent('MouseEvents'),
            a = document.createElement('a');
            a.download = filename;
            a.href = window.URL.createObjectURL(blob);
            a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
            e.initEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            a.dispatchEvent(e);
            // window.URL.revokeObjectURL(a.href); // clean the url.createObjectURL resource
        }
    }

使用本地存储

保存到本地存储：

 window.localStorage.setItem('key', value);

从本地存储获取

window.localStorage.getItem('key');

从 localStorage 中删除密钥

window.localStorage.removeItem('key');

或者使用 AngularJS 模块 ‘ngStorage’

浏览器兼容性

Chrome - 4
Firefox (Gecko) - 3.5
Internet Explorer - 8
Opera - 10.50
Safari (WebKit) - 4

查看现场示例（归功于@cOlz）

https://codepen.io/gMohrin/pen/YZqgQW

原文由 daan.desmedt 发布，翻译遵循 CC BY-SA 4.0 许可协议