只使用Angular是否可以将数据写入本地JSON文件？

Question

我正在尝试使用Angular在HTML表单中点击“提交”后将数据写入JSON文件，但是没有任何反应。我知道可以使用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中肯定包含数据。 如果有人能帮忙，将非常感激。 谢谢，阿隆。

- Alon Weissfeld

---

这完全是不可能的，因为在客户端你没有这样的权限。 - Hamid

Answer 1

不可能仅通过Angular写入数据到本地JSON文件。即使您从本地文件系统（例如file://myfile.html）或本地Web服务器（例如http://localhost/myfile.html或http://host-on-my-intranet/myfile.html）运行页面，您仍然无法直接从浏览器托管的JavaScript代码中写入文件。有两种选择：

1. Send it to something (e.g., a server) that can write it out, or

2. Provide it as a data: URI (if feasible in your case) that the user can right-click and choose "save as..."

   Here's how you create a data: URI for some JSON text:

   var uri = "data:application/json;charset=UTF-8," + encodeURIComponent(theJSON);
   

#2的完整示例：

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);

- T.J. Crowder

---

好的，明白了。尝试了第二个选择，效果很好。无论如何，未来会涉及到服务器。谢谢！ - Alon Weissfeld

Answer 2

Angular 运行在客户端。

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

- Quentin

Answer 3

由于安全原因（当您考虑到它的时候是有意义的！），您不能直接从Javascript访问本地文件系统。

使用JavaScript访问本地文件

- Alex McMillan

Answer 4

由于这不可能，您可以尝试另一种方法。顺便说一下，您的$scope.save并没有被调用，只是被分配了。

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

在初始化时执行以下操作，以获取您的模型：

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

- King Friday

---

localStorage很难被视为JSON文件。 - Sergio Tulentsev

@SergioTulentsev 目前不清楚具体要求是什么。提问者对Web开发还很陌生，根据当前技术的限制，正在提供一个可能的推理路径，但该路径并不起作用。如果您能提供一个可能的替代解决方案，这将被认为比仅仅陈述显而易见的问题更需要付出努力。 - King Friday

Answer 5

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

注意：目前在HTML 5中不建议使用锚标签包装按钮，但在Chrome中可以正常工作，这是我所需要的。可能会因人而异。

HTML:

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

Typescript：

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

- AnthonyW

---

这就是我需要的。太棒了！ - krish

Answer 6

好的，我在挖掘过去，但是今天我搜索它仍然很相关。

接受的答案是正确的，我只想添加这个实现，它适用于Angular 15中的按钮单击处理程序，而不需要向DOM添加实际的元素，并且还设置了要下载的文件名称。它正在处理一个.csv文件，但对于.json也是一样的。

onExportButtonClick() {
  // Render the CSV file content
  let textResult = 'column1,column2,column3\n';
  textResult += ... generate text content ...

  // Create a blob from the CSV file content
  const blob = new Blob([textResult], { type: 'text/csv' });

  // Create a link to the blob
  const link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = 'generated_filename.csv';
  link.click();
}

在模板中（使用Angular Material）：

<button mat-raised-button
        color="primary" (click)="onExportButtonClick()">
  <mat-icon>save_alt</mat-icon>
  Export
</button>

点击此按钮将启动生成文件的下载。

- Velko Ivanov