如何從Angular 6中的給定DTO數組中導出/導入JSON文件到本地硬盤？

Question

我想向使用Angular 6編寫的FrontEnd添加導出/導入功能。

My FrontEnd從.NET API獲取JSON格式的DTO。 我的計划是首先獲得“另存為”按鈕之類的功能，以便用戶可以將DTO []數組作為JSON文件存儲在本地硬盤上。
第二種方式是，他應該使用后記單詞，然后才能有一個“導入”按鈕，以將JSON文件從本地硬盤驅動器加載到FrontEnd中的DTO []數組中。

我使用異步管道訂閱Observable的ComponentA：

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

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

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

我找不到一個很好的例子或提示來檢索它。 我經過的鏈接始終都是關於Javascript的，因此不允許訪問本地硬盤嗎？

我剛剛找到用於異步操作的filesaver.js和streamaver.js。

所以我需要一個正確方向的提示/鏈接/基本示例或想法:)

Answer 1

互聯網的一般性質將阻止應用程序訪問用戶的硬盤驅動器。 我們確實可以訪問Local Storage，它有一些很大的限制。

// 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格式，然后繼續。