Question

我想为使用Angular 6编写的FrontEnd添加导出/导入功能。

我的FrontEnd从.NET API获取JSON格式的DTO。我的计划是首先获得“另存为”按钮之类的功能，以便用户可以将DTO []数组作为JSON文件存储在其本地硬盘驱动器上。
第二种方式，他应该使用后记字词，然后才能有一个“导入”按钮，以将JSON文件从本地硬盘加载到FrontEnd中的DTO []数组中。

ComponentA，我使用异步管道在其中订阅了我的Observable：

// component.ts
data: Observable<Setting[]>;

ngOnInit() {
  this.data = this.dataService.fetchData();
}

// component.html
<tr *ngFor="let s of data | async">

我找不到很好的例子或提示来检索它。我经过的链接始终都是关于Javascript的，因此不允许访问本地硬盘吗？

我刚刚找到用于异步操作的filesaver.js和streamsaver.js。

所以我需要一个正确方向的提示/链接/基本示例或想法：）

Answer 1

互联网的一般性质将阻止应用程序访问用户使用的硬盘。我们确实可以访问本地存储，但有一些很大的限制。

// save
localStorage.setItem('someName', JSON.stringify(someData));
// get
const someData = JSON.parse(localStorage.getItem('someName'));
//clear
localStorage.clear();

除此之外，您还必须提供用户选择保存的真实下载。您可以在内存中更改数据格式并将其作为application/octet-stream进行流式传输，甚至可以进行测试，只需为用户提供一个JSON文件，并选择一个新的扩展名，其内容类型为application/octet-stream 但是，这不能保证浏览器不会使用智能功能来检测和显示JSON内联。

我的第一种方法是可以使用本地存储来完成此操作，如果没有，那么我可以将文件压缩到内存中，而只是application/octet-stream。然后，当用户上传该文件时，我将确保该文件的大小合理（不是hack），然后解压缩，并确认它是我的JSON格式，然后继续。

如何从Angular 6中的给定DTO数组中导出/导入JSON文件到本地硬盘？

1 个答案: