我在隐藏的文本区域中有一些文本。单击按钮时，我希望将文本作为.txt文件提供下载。这可以使用 AngularJS 或 Javascript 吗？
您如何使用 AngularJS 或 Javascript 提供文件以供下载？
IT技术
javascript
angularjs
2021-02-04 21:08:30
6个回答
您可以使用Blob.
<a download="content.txt" ng-href="{{ url }}">download</a>
在您的控制器中：
var content = 'file content for example';
var blob = new Blob([ content ], { type : 'text/plain' });
$scope.url = (window.URL || window.webkitURL).createObjectURL( blob );
为了启用 URL：
app = angular.module(...);
app.config(['$compileProvider',
function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|blob):/);
}]);
请注意
每次调用 createObjectURL() 时，都会创建一个新的对象 URL，即使您已经为同一个对象创建了一个。当您不再需要它们时，必须通过调用 URL.revokeObjectURL() 来释放它们中的每一个。当文档被卸载时，浏览器会自动释放这些；但是，为了获得最佳性能和内存使用，如果有可以明确卸载它们的安全时间，则应该这样做。
来源：MDN
只需单击按钮即可使用以下代码下载。
在 html 中
<a class="btn" ng-click="saveJSON()" ng-href="{{ url }}">Export to JSON</a>在控制器中
$scope.saveJSON = function () {
$scope.toJSON = '';
$scope.toJSON = angular.toJson($scope.data);
var blob = new Blob([$scope.toJSON], { type:"application/json;charset=utf-8;" });
var downloadLink = angular.element('<a></a>');
downloadLink.attr('href',window.URL.createObjectURL(blob));
downloadLink.attr('download', 'fileName.json');
downloadLink[0].click();
};试试这个
<a target="_self" href="mysite.com/uploads/ahlem.pdf" download="foo.pdf">
并访问此站点，它可能对您有所帮助:)
这可以在 javascript 中完成，而无需打开另一个浏览器窗口。
window.location.assign('url');
将“url”替换为指向您文件的链接。ng-click如果您需要从按钮触发下载，您可以将它放在一个函数中并调用它。
在我们当前工作的项目中，我们有一个不可见的 iFrame，我必须将文件的 url 提供给 iFrame 以获取下载对话框。单击按钮时，控制器生成动态 url 并触发 $scope 事件，其中directive列出了我编写的自定义项。如果 iFrame 尚不存在，则该指令将在正文中附加一个 iFrame 并在其上设置 url 属性。
编辑：添加指令
appModule.directive('fileDownload', function ($compile) {
var fd = {
restrict: 'A',
link: function (scope, iElement, iAttrs) {
scope.$on("downloadFile", function (e, url) {
var iFrame = iElement.find("iframe");
if (!(iFrame && iFrame.length > 0)) {
iFrame = $("<iframe style='position:fixed;display:none;top:-1px;left:-1px;'/>");
iElement.append(iFrame);
}
iFrame.attr("src", url);
});
}
};
return fd;
});
该指令响应名为的控制器事件 downloadFile
所以在你的控制器中你做
$scope.$broadcast("downloadFile", url);