Aby umożliwić użytkownikowi pobranie pliku bezpośrednio ze strony internetowej w HTML, wystarczy zastosować odpowiednie atrybuty w tagu <a>. Poniżej znajduje się szczegółowy poradnik, jak stworzyć taki mechanizm, wraz z wyjaśnieniami, praktycznymi przykładami oraz typowymi zastosowaniami.
Podstawowy odsyłacz do pobrania pliku
Najprostszym sposobem jest użycie tagu <a> z atrybutem href, do którego podajesz ścieżkę do pliku, oraz dodatkowo atrybutu download. To sprawia, że po kliknięciu linku przeglądarka automatycznie pobiera plik zamiast próbować go otworzyć.
<a href="dokument.pdf" download>Pobierz plik PDF</a> W tym przykładzie przeglądarka pobierze plik dokument.pdf z serwera do katalogu domyślnych pobrań użytkownika.
Ustawienie własnej nazwy pobieranego pliku
Możesz wskazać, jaką nazwę ma mieć plik po pobraniu, dodając wartość do atrybutu download:
<a href="images/zdjecie.jpg" download="wakacje-2025.jpg">Pobierz zdjęcie z wakacji</a> Nawet jeśli plik na serwerze nazywa się inaczej, użytkownik otrzyma go pod podaną nazwą – w tym przypadku „wakacje-2025.jpg”.
Pobieranie różnych typów plików
Ta technika działa dla większości typów plików (PDF, DOCX, JPG, ZIP, CSV, MP3, MP4 i wielu innych). Najczęściej wykorzystywana jest do:
- udostępniania dokumentacji (np. instrukcje PDF, karty katalogowe),
- przesyłania faktur, certyfikatów lub potwierdzeń,
- umożliwiania pobrania materiałów szkoleniowych (prezentacje, filmy, audio),
- udostępniania plików instalacyjnych, archiwów ZIP lub gotowych projektów do pobrania,
- dostarczania plików graficznych (tapety, zdjęcia, projekty).
Możliwości rozszerzenia – grafika i mapy obrazów
Poza tradycyjnymi linkami możliwe jest także stosowanie atrybutu download w tagu <area> w ramach mapy obrazków:
<img src="mapa.jpg" usemap="#mapa">
<map name="mapa">
<area shape="rect" coords="34,44,270,350" href="plik.zip" download="projekt.zip" alt="Pobierz projekt">
</map> Tak oznaczony fragment grafiki umożliwi pobranie wybranego pliku po kliknięciu odpowiedniego obszaru.
Przykład – lista plików do pobrania
Możesz zbudować przejrzystą listę plików do pobrania, np.:
<ul>
<li><a href="materiały/plan-lekcji.pdf" download="plan-lekcji-2025.pdf">Plan lekcji</a></li>
<li><a href="materiały/zadania.docx" download="zadania-domowe.docx">Zadania domowe</a></li>
<li><a href="materiały/regulamin.pdf" download="regulamin.pdf">Regulamin</a></li>
</ul>Informacje praktyczne i uwagi
- użytkownik otrzyma plik w folderze pobierania przeglądarki, pobieranie następuje natychmiast po kliknięciu i nie wymaga dodatkowych potwierdzeń,
- atrybut
downloaddziała tylko dla plików pochodzących z tej samej domeny lub odpowiednio skonfigurowanych pod kątem CORS (Cross-Origin Resource Sharing), - w przypadku plików dużych lub ważnych, dobrym zwyczajem jest dodanie wizualnej informacji o rozmiarze pliku lub przybliżonym czasie pobierania.
Zaawansowane zastosowania – pobieranie plików generowanych dynamicznie
Jeśli plik jest generowany w locie na serwerze (np. na podstawie danych wprowadzonych przez użytkownika), odsyłacz może kierować do skryptu (np. PHP, Python), który zwróci odpowiedni nagłówek i wygenerowany plik, a atrybut download nadal wymusi pobranie.
Tworzenie linku do pobrania na przykładzie kompletnej strony HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Pobierz pliki</title>
</head>
<body>
<h1>Materiały do pobrania</h1>
<p>Kliknij, aby pobrać wybrany plik:</p>
<a href="raport.pdf" download="raport-2025.pdf">Pobierz raport roczny</a>
</body>
</html>
Podsumowanie najważniejszych korzyści i możliwości
- prosta implementacja w HTML bez dodatkowego kodu JavaScript,
- wymuszanie pobierania zamiast otwierania pliku w przeglądarce,
- możliwość nadania własnej nazwy pobieranemu plikowi,
- zastosowanie zarówno do pojedynczych plików, jak i rozbudowanych list, grafik czy nawet map obrazów.
Korzystając z powyższych technik, można łatwo przygotować profesjonalną sekcję pobierania plików w serwisie internetowym, dbając zarówno o wygodę użytkownika, jak i bezpieczeństwo udostępnianych materiałów.
