使用 Angular 创建 JSON 下载链接

【问题标题】：create JSON download link with angular使用 Angular 创建 JSON 下载链接
【发布时间】：2016-05-04 21:43:59
【问题描述】：

我正在尝试创建一个可以像这样下载 JSON 文件的链接

控制器

$scope.url = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));

查看

<a href="url" download="download.json">download</a>

但是当我检查生成的 HTML 时，unsafe: 被添加到 href 值的开头，这会阻止链接工作。

我尝试使用 $sce 服务的各种方法来通知 Angular 这个 URL 应该被信任，但没有成功。

【问题讨论】：

可能与stackoverflow.com/questions/15606751/…重复

标签： javascript angularjs

【解决方案1】：

这是一个有效的小提琴：https://jsfiddle.net/776gwzz8/2/

<script data-require="angular.js@1.5.5" data-semver="1.5.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
  <a href="{{jsonUrl}}" download="download.json">download</a>
</div>

<script type="text/javascript">
    var app = angular.module("app", []);

    app.config( [
        '$compileProvider',
        function( $compileProvider )
        {   
            $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|data|chrome-extension):/);
            // Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
        }
    ]);

    app.controller("MainCtrl", ["$scope", function($scope) {

      var jsobObj = { name: 'Michelle', age: 28 };
      var jsonData = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(jsobObj));

      $scope.jsonUrl = 'data:' + jsonData;

    }]);
</script>

【讨论】：