angularjs 有没有可能只使用angular将数据写入本地json文件?

ftf50wuq  于 2023-03-22  发布在  Angular
关注(0)|答案(6)|浏览(168)

我尝试在html formly-form上使用angular点击“Submit”后将数据写入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';
        });
    };
};

网页:

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

biswetbf

biswetbf1#

有没有可能只使用angular将数据写入本地json文件?
不能。即使你是从本地文件系统(例如file://myfile.html)或本地web服务器(例如http://localhost/myfile.htmlhttp://host-on-my-intranet/myfile.html)运行页面,你仍然无法直接从浏览器托管的JavaScript代码写入文件。
两个选择:
1.将其发送到可以将其写出的对象(例如,服务器),或者
1.将其作为data: URI提供(如果在您的情况下可行),用户可以右键单击并选择“保存为...”
以下是如何为一些JSON文本创建data: URI:

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

koaltpgm2#

没有。
Angular运行客户端。
如果你想将数据写入服务器(即使是与浏览器在同一台计算机上的服务器),那么你需要服务器端代码来完成。

eyh26e7m

eyh26e7m3#

你不能从Javascript直接访问本地文件系统。这是出于安全原因而强制执行的(当你考虑它时,这是有意义的!)。
Local file access with javascript

7vhp5slm

7vhp5slm4#

因为这是不可能的,你可以尝试另一个路由。你的$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);
hsvhsicv

hsvhsicv5#

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

**注意:**不建议在HTML5中使用锚标签 Package 按钮,但它在Chrome中可以工作,这是我所需要的。YMMV。

超文本:

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

k0pti3hp6#

好吧,我在这里挖掘过去,但这个问题仍然是相关的,从我今天寻找它来判断。
接受的答案是正确的,我只是想添加这个在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>

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

相关问题