Jak odczytać lokalny plik tekstowy za pomocą JavaScript?

W JavaScript dostępnych jest wiele pakietów i interfejsów API, które pozwalają użytkownikowi odczytać dane z lokalnie umieszczonego pliku. Dwie z najbardziej znanych z tych bibliotek to

1. Pakiet systemu plików: umożliwia programy JavaScript na odczyt plików z systemu
2. FileReaderWeb API: Umożliwia pracę z plikami z strony internetowej HTML.

Jak widać, oba działają inaczej; Jedna działa dla strony internetowej HTML, a druga dla lokalnych programów JavaScript.

Pakiet systemu plików do odczytu plików na pulpicie

Pakiet systemu plików jest wyposażony w domyślne środowisko węzłów dla lokalnie hostowanych programów JavaScript. Jednak nadal musisz dołączyć pakiet systemu plików do kodu JavaScript za pomocą wymaganego słowa kluczowego. Następnie funkcja Readfile () Zawarte w tym pakiecie pozwala odczytać dane z pliku.

Składnia metody ReadFile ()
Składnia metody Readfile () jest podana jako:

FileSystemvar.ReadFile (PathtototeFile, opcje, funkcja CallbackFunction);

Szczegóły tej składni są jako:

• FilesStamvar: Jest to zmienna, która została ustalona równa wymagaj systemu plików pakiet
• Pathtothefile: To jest ścieżka do pliku, który chcesz przeczytać
• Opcje: Są to opcjonalne opcje, które mogą filtrować kodowanie i inne atrybuty pliku
• Funkcja oddzwonienia: Funkcja wywołania zwrotnego, która zostanie wykonana po pomyślnym odczytaniu pliku

Przykład 1: Czytanie pliku z pakietem systemu plików

Zacznij od utworzenia nowego pliku tekstowego na komputerze i umieść w nim jakiś tekst

Następnie wejdź do pliku JavaScript i dołącz pakiet systemu plików za pomocą słowa kluczowego wymagania:

const fs = wymaga („fs”);

Następnie użyj następujących wierszy:

fs.Readfile („demo.txt ", (err, data) =>
if (err) rzuć err;
konsola.log (dane.ToString ());
);

W kodzie wspomnianym powyżej wykonywane są następujące kroki:

• Przeczytaj plik „próbny.tekst"
• Jeśli wystąpi błąd, wyrzuć ten komunikat o błędzie na terminal
• W przypadku braku błędu przechowuj dane odczytu z pliku w dane zmienny
• Wydrukuj treść dane zmienna po przekształceniu go w ciągu za pomocą ToString () metoda

Po wykonaniu kodu obserwujesz następujące dane wyjściowe na terminalu:

Dane z pliku zostały wydrukowane na terminalu.

FileReader Web API do czytania plików na stronie internetowej HTML

API czytnika plików działa tylko z stronami internetowymi HTML, a jednym z ograniczeń tego interfejsu API jest to, że działa na plikach, które zostały odczytane <wejście type = „Plik”> Tag. Ma wiele funkcji, które pozwala użytkownikowi odczytać plik w różnych kodowaniach.

Przykład 2: Czytanie lokalnego pliku tekstowego ze strony internetowej HTML

Zacznij od skonfigurowania strony internetowej HTML, w tym przypadku użyj następujących wierszy:

Otrzymasz następującą stronę internetową w przeglądarce:

Następnie przejdź do pliku JavaScript i zapisz następujące wiersze kodu:

dokument.getElementById („InputFileToAD”)
.addEventListener („zmiana”, function ()
var fr = new FileReader ();
Fr.Readastext (to.pliki [0]);
Fr.onload = function ()
konsola.Log (fr.wynik);
;
);

W kodzie wspomnianym powyżej wykonywane są następujące kroki:

• Na twoim słuchacz jest stosowany Z identyfikatorem „InputFileToAD"
• Następnie obiekt czytnika plików (FR) został utworzony za pomocą konstruktora FileReader ()
• Następnie pierwszy plik na jest czytany jako tekst za pomocą Fr zmienny
• Po pomyślnym odczytaniu pliku, że dane są drukowane na konsoli

Aby to zademonstrować, wybierz ten sam plik, który został wybrany w pierwszym przykładzie, a otrzymasz następujący wynik na konsoli przeglądarki:

Wynik pokazuje, że plik został pomyślnie odczytany przez stronę internetową HTML.

Wniosek

Aby odczytać lokalnie umieszczony plik tekstowy, mamy dwie opcje: do załadowania pliku w HTML lub odczytanie tego pliku w programie JavaScript Desktop JavaScript. W tym celu masz interfejs internetowy czytnika plików dla stron internetowych i pakiet systemu plików dla JavaScript Desktop JavaScript. Zasadniczo oba wykonują tę samą operację: czytanie pliku tekstowego. W tym samouczku użyłeś funkcji ReadFile () z pakietu systemu plików i ReadFileAStext () z interfejsu API internetowego czytnika plików.