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

Question

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

ctrl.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')
}

Answer 1

保存到文件系统

看一下angular-file-saver

或者使用以下代码作为保存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
        }
    }

使用LocalStorage

保存到localStorage:

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

从localStorage获取

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

Answer 2

$http({

            method : 'GET',
            url : $scope.BASEURL + 'file-download?fileType='+$scope.selectedFile,
            responseType: 'arraybuffer',
            headers : {
                'Content-Type' : 'application/json'
            }

        }).success(function(data, status, headers, config) {
            // TODO when WS success
            var file = new Blob([ data ], {
                type : 'application/json'
            });
            //trick to download store a file having its URL
            var fileURL = URL.createObjectURL(file);
            var a         = document.createElement('a');
            a.href        = fileURL; 
            a.target      = '_blank';
            a.download    = $scope.selectedFile+'.json';
            document.body.appendChild(a);
            a.click();

        }).error(function(data, status, headers, config) {

        });

在成功部分需要打开本地系统,用户可以通过它选择,保存文件的位置.我在这里用过<a>.而且我正在享受宁静的服务