如何使用AngularJS创建文件并保存到本地fileSystem？
如何使用AngularJS创建文件并保存到本地fileSystem？
提问于 2016-07-19 23:34:27
我想在登录数据之前创建并保存文件。下面的方法是创建数据并保存到文件中，只有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')
}回答 2
Stack Overflow用户
发布于 2016-09-26 18:55:46
$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>。我正在点击restful服务
Stack Overflow用户
发布于 2018-08-13 05:30:22
如何使用AngularJS将文件下载到本地(带演示)
使用具有download属性的<a>标记：
<a download="{{files[0].name}}" xd-href="data">
<button>Download data</button>
</a>xd-href指令：
app.directive("xdHref", function() {
return function linkFn (scope, elem, attrs) {
scope.$watch(attrs.xdHref, function(newVal) {
newVal && elem.attr("href", newVal);
});
};
});下载时，浏览器会提示用户一个可以接受或取消的对话框。有关更多信息，请参阅MDN HTML Reference - Tag
angular.module("app",[])
.controller("myVm", function($scope, $http, $window) {
var vm = $scope;
var url = "//httpbin.org/post";
var config = { headers: {"Content-Type": undefined} };
vm.upload = function() {
vm.spin = "Uploading...";
$http.post(url, vm.files[0], config).
then(function(response) {
vm.result = "SUCCESS";
vm.data = response.data.data;
}).catch(function(response) {
vm.result = "ERROR "+response.status;
}).finally(function() {
vm.spin = undefined
});
};
})
.directive("xdHref", function() {
return function linkFn (scope, elem, attrs) {
scope.$watch(attrs.xdHref, function(newVal) {
newVal && elem.attr("href", newVal);
});
};
})
.directive("selectNgFiles", function() {
return {
require: "ngModel",
link: function postLink(scope,elem,attrs,ngModel) {
elem.on("change", function(e) {
var files = elem[0].files;
ngModel.$setViewValue(files);
});
}
};
})<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="myVm">
<h2>Upload and Download File with AngularJS</h2>
<input type="file" select-ng-files ng-model="files">
<br>
<code>
Name: {{files[0].name}}<br>
Size: {{files[0].size}}<br>
Type: {{files[0].type}}<br>
Date: {{files[0].lastModifiedDate}}<br>
</code>
<button ng-click="upload()" ng-disabled="!files">
Upload
</button>
<span ng-show="spin">{{spin}}</span>
<span ng-show="result">{{result}}</span>
<a download="data_{{files[0].name}}" xd-href="data">
<button ng-disabled="!data">Download data</button>
</a>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38462894
复制相关文章
相似问题
腾讯云开发者
