Lekcja 5.4: Linki do plików (download)
Tworzenie linków do pobierania plików
Standardowo, kliknięcie linku prowadzącego do pliku (np. PDF, obrazka, archiwum ZIP) powoduje, że przeglądarka próbuje go otworzyć i wyświetlić (jeśli potrafi) lub pyta użytkownika, co zrobić. Czasami jednak chcemy, aby kliknięcie linku od razu inicjowało pobieranie pliku na dysk użytkownika.
Do tego celu służy atrybut download znacznika <a>.
Atrybut `download`
Atrybut download jest atrybutem logicznym (boolean), który informuje przeglądarkę, że zasób wskazany przez atrybut href powinien zostać pobrany, a nie wyświetlony.
Podstawowe użycie:
W najprostszej formie wystarczy dodać sam atrybut download do linku.
<a href="dokument.pdf" download>Pobierz dokument PDF</a>Po kliknięciu tego linku przeglądarka rozpocznie pobieranie pliku dokument.pdf, używając jego oryginalnej nazwy.
Pobierz (przykład - nie zadziała bez pliku)
(Uwaga: Aby ten przykład zadziałał, musiałby istnieć plik pod wskazanym adresem href)
Użycie z wartością (sugerowana nazwa pliku):
Atrybutowi download można również przypisać wartość tekstową. Ta wartość będzie sugerowaną nazwą pliku, pod jaką przeglądarka zapisze pobierany zasób. Jest to przydatne, gdy oryginalna nazwa pliku na serwerze jest nieczytelna lub chcemy nadać plikowi bardziej opisową nazwę.
<!-- Plik na serwerze nazywa się np. img_734_final_v2.jpg -->
<a href="images/img_734_final_v2.jpg" download="ladny-krajobraz.jpg">Pobierz obrazek krajobrazu</a>
<!-- Plik na serwerze to raport.pdf -->
<a href="files/raport.pdf" download="Raport_Sprzedazy_Q1_2025.pdf">Pobierz Raport Sprzedaży Q1 2025</a>W pierwszym przykładzie przeglądarka zaproponuje zapisanie pliku pod nazwą ladny-krajobraz.jpg, a w drugim jako Raport_Sprzedazy_Q1_2025.pdf.
Ograniczenia i uwagi
- Polityka Same-Origin: Atrybut
downloaddziała niezawodnie tylko dla plików pochodzących z tej samej domeny (same-origin). W przypadku linków do plików na innych domenach (cross-origin), przeglądarka może zignorować atrybutdownloadze względów bezpieczeństwa i spróbować otworzyć plik zamiast go pobierać. Zachowanie może zależeć od nagłówków HTTP wysyłanych przez serwer hostujący plik (np.Content-Disposition). - Obsługa przez przeglądarki: Atrybut
downloadjest dobrze wspierany przez nowoczesne przeglądarki, ale starsze wersje (np. Internet Explorer) mogą go nie obsługiwać. - Typy plików: Chociaż atrybut
downloaddziała dla większości typów plików, niektóre przeglądarki mogą mieć specyficzne zachowania dla pewnych typów MIME (np. plików HTML).
Kiedy używać atrybutu `download`?
Atrybut download jest szczególnie przydatny, gdy:
- Chcemy umożliwić użytkownikom łatwe pobieranie dokumentów (PDF, DOCX), arkuszy kalkulacyjnych, archiwów (ZIP, RAR).
- Udostępniamy pliki multimedialne (obrazy, audio, wideo), które użytkownik ma zapisać lokalnie.
- Chcemy zasugerować konkretną, bardziej zrozumiałą nazwę dla pobieranego pliku.
Alternatywy (Nagłówek `Content-Disposition`)
Po stronie serwera można kontrolować sposób traktowania pliku przez przeglądarkę za pomocą nagłówka HTTP Content-Disposition. Ustawienie wartości attachment w tym nagłówku również wymusi pobieranie pliku.
Content-Disposition: attachment; filename="sugerowana_nazwa.pdf"Użycie nagłówka serwera jest bardziej niezawodnym sposobem wymuszania pobierania, zwłaszcza w przypadku zasobów cross-origin, ale wymaga dostępu do konfiguracji serwera.
Zadanie praktyczne (z rozwiązaniem)
Zadanie: Stwórz link, który pozwoli użytkownikowi pobrać plik tekstowy o nazwie notatki.txt (możesz stworzyć taki pusty plik w tym samym katalogu co plik HTML). Nadaj pobieranemu plikowi sugerowaną nazwę moje_notatki_z_kursu.txt.
Rozwiązanie:
1. Stwórz pusty plik o nazwie notatki.txt w tym samym katalogu co plik HTML.
2. Dodaj poniższy kod HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Pobieranie Pliku</title>
</head>
<body>
<h1>Pobierz swoje notatki</h1>
<p>Kliknij poniższy link, aby pobrać plik z notatkami:</p>
<a href="notatki.txt" download="moje_notatki_z_kursu.txt">Pobierz notatki (txt)</a>
</body>
</html>Dodatkowe zadania do samodzielnego wykonania:
- Znajdź w internecie dowolny obrazek (upewnij się, że masz prawo go użyć) i stwórz link do jego pobrania z sugerowaną nazwą.
- Stwórz link do pobrania pliku PDF (możesz użyć dowolnego darmowego PDF z internetu, ale pamiętaj o ograniczeniach same-origin - najlepiej umieść go na swoim serwerze/w katalogu projektu).
- Przetestuj, co się stanie, gdy spróbujesz użyć atrybutu
downloaddla linku prowadzącego do innej strony HTML (np.<a href="index.php" download>...</a>).
Najczęściej zadawane pytania
Jak wymusić pobieranie pliku po kliknięciu linku?
Aby wymusić pobieranie pliku, dodaj atrybut download do znacznika <a> linkującego do tego pliku, np. <a href="plik.zip" download>. Przeglądarka rozpocznie pobieranie zamiast próbować wyświetlić plik.
Jak zasugerować inną nazwę dla pobieranego pliku?
Aby zasugerować inną nazwę, przypisz ją jako wartość atrybutu download, np. download="nowa_nazwa.pdf". Przeglądarka użyje tej nazwy podczas zapisywania pliku na dysku użytkownika.
Czy atrybut download działa dla plików z innych domen?
Atrybut download może nie działać niezawodnie dla plików hostowanych na innych domenach (cross-origin) ze względów bezpieczeństwa. Jego działanie zależy od polityki same-origin przeglądarki i nagłówków HTTP serwera.
Czy atrybut download jest wspierany przez wszystkie przeglądarki?
Nowoczesne przeglądarki (Chrome, Firefox, Edge, Safari) dobrze wspierają atrybut download. Jednak starsze wersje, zwłaszcza Internet Explorer, mogą go nie obsługiwać.
Jaka jest alternatywa dla atrybutu download?
Bardziej niezawodną metodą wymuszania pobierania, działającą również dla zasobów cross-origin (jeśli serwer na to pozwala), jest użycie nagłówka HTTP Content-Disposition: attachment po stronie serwera.