Jak pobrać plik za pomocą JavaScript/JQuery?

JavaScript lub jQuery można łatwo użyć do wywołania pliku do pobrania po naciśnięciu przycisku lub naciśnięciu a Link tagu. Aby to zrobić, po prostu użyj „Lokalizacja.href ” własność "okno" obiekt i ustaw go równy ścieżce pliku na serwerze, który zostanie pobrany na komputerze klienta. Aby to lepiej zrozumieć, postępuj zgodnie z poniższymi przykładami.

Przykład 1: Za pomocą wanilii JS i tag

W tym przykładzie część skryptu zostałaby napisana w normalnym JavaScript, a naciśnięcie przycisku spowodowałoby, że komputer klienta pobrał zamierzony plik.

Krok 1: Skonfiguruj dokument HTML

Zacznij od utworzenia nowego dokumentu HTML o nazwie „Home”, a następnie dodaj następujące wiersze w tym dokumencie HTML:

Kliknij przycisk poniżej, aby pobrać plik!

Pobieranie pliku

Dodając powyższe linie w obrębie Tag elementu HTML spowodowałby następujący wynik w przeglądarce:

Z linii, które zostały dodane do dokumentu HTML, można łatwo zauważyć, że "na kliknięcie" właściwość przycisku została ustawiona na funkcję "pobieranie pliku()". Utwórzmy tę funkcję w następnym kroku

Krok 2: Część JavaScript

Albo w obrębie Tag skryptu lub w połączonym pliku JavaScript, dodaj następujące wiersze kodu, aby dodać funkcjonalność do przycisku:

Tutaj okno.Lokalizacja.właściwość HREF została ustawiona na ścieżkę pliku, który ma zostać pobrany przez komputer klienta. Ponieważ tylko nazwa pliku była używana jako ścieżka do pliku, oznacza to, że plik jest umieszczony w tym samym folderze co dokument HTML:

W każdym razie spowodowałoby to pobranie pliku przeglądarki.

Krok 3: Testowanie

Na koniec zwolnij dokument HTML i kliknij przycisk i obserwuj, że przeglądarka natychmiast rozpocznie pobieranie pliku:

Jak jasno wynika z powyższego GIF, że cała strona działa idealnie zgodnie z przeznaczeniem.

Przykład 2: Korzystanie z JQuery i etykietka

W tym przykładzie część skryptu zostanie napisana w jQuery i Link znacznika spowodowałby, że przeglądarka rozpocznie pobieranie zamierzonego pliku.

Krok 1: Skonfiguruj dokument HTML

Podobnie jak pierwszy przykład, utwórz nowy dokument HTML o nazwie „Strona główna”, a następnie dodaj następujące wiersze w tym dokumencie HTML:

Kliknij przycisk poniżej, aby pobrać plik!

Kliknij tutaj!

Teraz w tym przykładzie Tag z identyfikatorem „Pobierz” jest używany zamiast przycisku. Uruchomienie tego dokumentu HTML przyniesie następujące wyniki na stronie internetowej:

Dalej to dodanie jQuery do pobrania pliku za każdym razem, gdy łączy link.

Krok 2: Kod jQuery

W znaczniku skryptu lub w pliku skryptu dodaj następujące wiersze:

$ (dokument).gotowy (funkcja ()
$ („#Pobierz”).kliknij (funkcja (e)
mi.PreventDefault ();
okno.Lokalizacja.href = "demo.Docx ";
);
);

W powyższych liniach:

• Funkcja jest wywoływana, gdy dokument jest w pełni gotowy
• W ramach tej funkcji zastosowano stałą kontrolę na elemencie z identyfikatorem "pobierać" który jest właściwie etykietka a czek jest zdarzenia „kliknij”
• Następnie po prostu uzyskaj dostęp do lokalizacji.atrybut HREF do ścieżki pliku.

Krok 3: Testowanie

Pozostaw dokument HTML i kliknij link i obserwuj odpowiedź wyników, aby była taka:

Łącze klikalne powoduje, że komputer klienta pobrał zamierzony plik za pomocą jQuery

Zakończyć

Aby użyć JavaScript lub JQuery, aby maszyna klienta pobrała określony plik, po prostu uzyskaj dostęp do atrybutu HREF właściwości lokalizacji obiektu Window. Korzystając w ten sposób, łatwo jest utworzyć przycisk, który spowoduje pobranie pliku. A także klikalny link do pobrania pliku. W każdym razie procedura została dokładnie wyjaśniona w powyższych przykładach.