用angular创建JSON下载链接

Question

我试图创建一个链接来下载像这样的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应该信任此网址，但未成功。

Answer 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>