Question

我试图在点击＆＃34;提交＆＃34;之后尝试将数据写入json文件。在一个只使用角度的html formly-form上，但什么也没发生。我知道我可以使用angular读取json文件但不确定创建文件。控制器中的onSubmit（）：

function onSubmit() {
    $scope.save = function() {
        $http.post('./temp/sample_data.json', JSON.stringify($scope.model)).then(function(data) {
            $scope.msg = 'Data saved';
        });
    };
};

HTML：

<form name="form" ng-submit="onSubmit()" novalidate>
    <formly-form model="model" fields="fields"></formly-form><br/>
    <button type="submit">Submit</button>
</form>

还没有创建sample_data.json，如果我创建一个空文件，它也不会填满数据。 $ scope.model defenitly包含数据。如果有人可以提供帮助，我们将非常感激。谢谢，Alon。

Answer 1

是否可以将数据写入本地json文件，只有angular？

没有。即使您从本地文件系统（例如file://myfile.html）或本地网络服务器（例如http://localhost/myfile.html或http://host-on-my-intranet/myfile.html）运行该页面，您仍然无法获得从浏览器托管的JavaScript代码直接写入文件。

两种选择：

将其发送给可以写出来的东西（例如服务器），或者
将其作为data: URI（在您的情况下可行）提供，用户可以右键单击并选择＆＃34;另存为...＆＃34;

以下是为某些JSON文本创建data: URI的方法：
```
var uri = "data:application/json;charset=UTF-8," + encodeURIComponent(theJSON);
```

完整示例＃2：

＆＃13;

var theData = {
  foo: "bar"
};
var theJSON = JSON.stringify(theData);
var uri = "data:application/json;charset=UTF-8," + encodeURIComponent(theJSON);

var a = document.createElement('a');
a.href = uri;
a.innerHTML = "Right-click and choose 'save as...'";
document.body.appendChild(a);

＆＃13;

Answer 2

没有。

Angular运行客户端。

如果要将数据写入服务器（即使是与浏览器在同一台计算机上的数据），那么您需要服务器端代码来执行此操作。

Answer 3

您无法从Javascript访问本地文件系统（直接）。出于安全原因这是强制执行的（当你考虑它时就有意义了！）。

Local file access with javascript

Answer 4

由于这是不可能的，你可以试试另一条路线。你的$ scope.save没有被调用，只是被分配了。

$scope.save = function() {
  localStorage.model = JSON.stringify($scope.model);
};
function onSubmit() {
  $scope.save();
  $scope.msg = 'saved';
};

要让你的模型回来，请在init上执行此操作：

if (localStorage.model)
  $scope.model = JSON.parse(localStorage.model);

Answer 5

以下代码为JSON对象添加了一个下载按钮。

注意：对于HTML 5，建议不要使用带有锚标记的按钮来包装按钮，但我需要在Chrome中使用它。 YMMV。

HTML：

<a download="my-json-object.json" [href]="dataUri">
  <button>Download</button>
</a>

打字稿：

  get dataUri(): SafeUrl {
    const jsonData = JSON.stringify(this.dataSource);
    const uri = 'data:application/json;charset=UTF-8,' + encodeURIComponent(jsonData);
    return this.sanitizer.bypassSecurityTrustUrl(uri);
  }

除了有角度之外，是否可以将数据写入本地json文件？

5 个答案: