Jak pobrać plik za pomocą JavaScript

Jak pobrać plik za pomocą JavaScript
JavaScript obejmuje pakiet wbudowanych funkcji, metod i właściwości, aby spełnić wymagania użytkownika, a także programistę. Pobieranie plików jest przydatnym zadaniem w dowolnej przeglądarce, aby uruchomić plik i pobrać go. JavaScript umożliwia pobieranie dowolnego pliku z Internetu. Ten post pokazuje różne przykłady pobierania pliku za pomocą JavaScript.
  • Jak pobrać plik w JavaScript
  • Przykład 1: pobieranie pliku z Internetu
  • Przykład 2: Tworzenie i pobieranie pliku tekstowego

Jak pobrać plik w JavaScript?

JavaScript zapewnia Href atrybut do pobrania pliku. Atrybut jest obsługiwany przez HTML 5. Korzystając z tego atrybutu, użytkownicy mogą zastosować połączyć tak dobrze jak przycisk do pobierania plików zgodnie z ich potrzebami. Dwa przykłady są szczegółowo wyjaśnione, aby pobrać tekst, a także pliki obrazów w JavaScript.

Przykład 1: pobieranie pliku z Internetu

Przykład jest dostosowany do pobrania Jpg Plik za pomocą hiperłącza w JavaScript. Kawałek kodu jest podzielony na dwa nazwane pliki Html I JavaScript.

Kod HTML

<H2> Przykład do pobrania pliku JPGH2>

Kliknij poniższy link


Link do pobrania

W tym kodzie,

  • Po pierwsze, cały skrypt jest zapisany w środku Tagi do wyrównania centrum.
  • Potem kotwica Tag jest wykorzystywany do podania linku o nazwie „Link do pobrania."
    Wreszcie plik obrazu o nazwie „Remotar-operato.JPG ” jest pobierany przez naciśnięcie "Link do pobrania"

Kod JavaScript

// Utwórz link
const Download = (p, f) =>
const Anchor = dokument.createElement („a”);
kotwica.href = p;
kotwica.Pobierz = f;
dokument.ciało.appendchild (kotwica);
kotwica.Kliknij();
dokument.ciało.resuseChild (kotwica);
;

Opis kodu JavaScript jest napisany poniżej:

  • pobierać Atrybut jest wykorzystywany przez przekazanie dwóch argumentów, P I
  • Potem kotwica Obiekt jest tworzony, który jest powiązany z plikiem HTML, przekazując "A"
  • Argument P Określa lokalizację pliku powiązanego z Href
  • Ponadto drugi argument F odnosi się do nazwy pobranego pliku.
  • Ponadto załącznik właściwość jest wykorzystywana do wyzwolenia kotwica
  • Wreszcie resecyeChild właściwość służy do usunięcia zdarzenia tworzonego przez Kliknij().

Wyjście

Wyjście zwraca wiadomość z „Link do pobrania". Po naciśnięciu linku pobierany jest plik obrazu w formacie JPG.

Przykład 2: Tworzenie i pobieranie pliku tekstowego

Inny przykład jest rozważany do pobrania tekst Plik w JavaScript. W tym przykładzie przycisk jest dołączony do pobrania tekst plik. Tutaj przykład pokazuje, że użytkownik może wprowadzić tekst do pola tekstowego, a tekst zostanie pobrany do pliku tekstowego. Nazwa pobranego pliku to „JavaScript.tekst". Kompletny kod jest zapisywany w pliku HTML.

Kod HTML

Przykład do pobrania pliku tekstowego


Kliknij poniższy link




Opis kodu jest omówiony poniżej:

  • Obszar tekstu jest określony za pomocą Tagi, w których użytkownik może modyfikować dane do pobierania.
  • A „Przycisk pobierania” jest załączony do pobrania pliku.

JavaScript

dokument.getElementById („dwn-btn”).addEventListener („kliknij”, funkcja ()
var t = dokument.getElementById („val”).wartość;
var fn = "JavaScript.tekst";
Dwn (fn, t);
, FAŁSZ);
funkcja dwn (fn, t)
var element = dokument.createElement („a”);
element.setAttribute („href”, „data: text/plain; Charset = UTF-8, ' + encodeuricomponent (t));
element.setAttribute („pobierz”, fn);
element.styl.display = „Brak”;
dokument.ciało.appendChild (element);
element.Kliknij();
dokument.ciało.revuchechild (element);

Kod wyjaśniono jako:

  • Własność addEventListener jest zatrudniony do wyzwolenia funkcjonować() Przekazując Kliknij wartość przycisku.
  • Metoda Dwn służy do pobrania pliku, przekazując fn I T
  • setAttribute jest wykorzystywany do ustawienia Href I pobierać atrybuty.
  • załącznik Nieruchomość jest wykorzystywana do dołączenia elementów.
  • Potem Kliknij() Metoda jest stosowana do elementu.
  • Wreszcie revunchild () Metoda usuwa elementy dziecięce.

Wyjście

Wyjście wyświetla obszar tekstu, w którym komunikat „Witamy w JavaScript ” jest napisane. Po naciśnięciu „Przycisk Pobierz ”, Plik tekstowy o nazwie „JavaScript.tekst" jest pobierany, zawierający w niej wiadomość.

Wniosek

Href Atrybut służy do pobierania pliku poprzez wyzwalanie zdarzenia w JavaScript. Na podstawie Href atrybut, dwa przykłady są praktycznie zaimplementowane do pobierania obraz I tekst akta. W pierwszym przykładzie a hiperłącze jest dołączony do pobrania obraz plik, podczas gdy w drugim przykładzie a przycisk jest zatrudniony do pobrania tekst plik. W tym przewodniku nauczyłeś się atrybutów JavaScript do pobrania pliku.