Chcę dodać funkcję eksportu/importu do mojego FrontEndu napisanego w Angular 6.

Mój FrontEnd pobiera DTO w formacie JSON z interfejsu API platformy .NET. Planuję najpierw uzyskać funkcję taką jak przycisk „Zapisz jako”, aby użytkownik mógł przechowywać tablicę DTO[] jako plik JSON na swoim lokalnym dysku twardym.
Po drugie, powinien później móc mieć przycisk „Importuj”, aby załadować plik JSON z lokalnego dysku twardego do tablicy DTO[] w FrontEndzie.

ComponentA, w którym subskrybuję mój Observable za pomocą potoku asynchronicznego:

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

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

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

Nie mogłem znaleźć dobrego przykładu ani wskazówki, jak to odzyskać. Linki, przez które przeszedłem, zawsze dotyczyły JavaScriptu, który nie ma dostępu do lokalnego dysku twardego?

Właśnie znalazłem pliki filesaver.js i streamsaver.js do operacji asynchronicznych..

Potrzebuję więc podpowiedzi/linku/podstawowego przykładu lub pomysłu we właściwym kierunku :)

0
student18 2 listopad 2018, 09:56

1 odpowiedź

Najlepsza odpowiedź

Ogólny charakter Internetu uniemożliwi aplikacji dostęp do dysku twardego użytkownika. Mamy dostęp do pamięci lokalnej, która ma dość duże ograniczenia.

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

Poza tym będziesz musiał podać prawdziwe pobieranie, które użytkownik wybrał do zapisania. Możesz w pamięci zmienić format danych i przesłać je strumieniowo jako application/octet-stream, możesz nawet chcieć przetestować, po prostu dając użytkownikowi plik JSON z nowym wybranym rozszerzeniem o typie zawartości application/octet-stream ale nie gwarantuje to, że przeglądarka nie będzie używać inteligentnej funkcji do wykrywania i wyświetlania wbudowanego JSON.

Moim pierwszym podejściem byłoby to, czy można to zrobić z pamięcią lokalną, jeśli nie, to spakowałbym plik w pamięci i po prostu application/octet-stream plik. Później, gdy użytkownik prześle ten plik, upewnię się, że plik ma rozsądny rozmiar (nie jest to hack), rozpakuję i zweryfikuję, że jest to mój format JSON, a następnie kontynuuję.

1
user9298624user9298624 2 listopad 2018, 10:11