Jak mogę utworzyć link do pobrania w HTML?


224

Mam podstawową ideę HTML. Chcę utworzyć link do pobrania w mojej przykładowej witrynie, ale nie mam pojęcia, jak go utworzyć. Jak utworzyć link, aby pobrać plik, a nie go odwiedzić?


11
Znak akceptacji dla tego pytania powinien zostać zmieniony.
Pekka,

Odpowiedzi:


163

Ta odpowiedź jest nieaktualna. Mamy teraz downloadatrybut . (patrz także ten link do MDN )

Jeśli przez „link do pobrania” rozumiesz link do pliku do pobrania, użyj

  <a href="http://example.com/files/myfile.pdf" target="_blank">Download</a>

target=_blankwykorzysta pojawiają się nowe okno przeglądarki przed rozpoczęciem pobierania. To okno jest zwykle zamknięte, gdy przeglądarka wykryje, że zasób jest plikiem do pobrania.

Pamiętaj, że typy plików znane przeglądarce (np. Obrazy JPG lub GIF) będą zwykle otwierane w przeglądarce.

Możesz spróbować wysłać odpowiednie nagłówki, aby wymusić pobieranie tak, jak opisano np . Tutaj . (w tym celu wymagany jest skrypt po stronie serwera lub dostęp do ustawień serwera).


1
dlaczego nie użyć atrybutu pobierania, jeśli otrzymasz plik taki jak jpg, zostanie on pobrany, a nie tylko otwarty.
Ben

2
Pomiń „target = '_ blank'”, ponieważ to nie zadziała w IE. Czy w ogóle to przetestowałeś?
Tara,

4
@Dudeson proszę określić, co „nie będzie działać” i o której wersji IE mówisz. (Teraz można jednak bezpiecznie zastosować podejście opisane w znacznie nowszej odpowiedzi TIIUNDER poniżej. Powinno uzyskać znak akceptacji.)
Pekka,

2
@Sergiu odpowiedź ma siedem lat. Nie mogę go usunąć, a pytający nie odpowiedział na moją prośbę o zmianę znaku akceptacji ... nic nie możemy zrobić, chociaż dodam link do bardziej aktualnej odpowiedzi
Pekka

1
@Dani zobacz odpowiedź TIIUNDER poniżej, która jest teraz poprawna.
Pekka

455

W nowoczesnych przeglądarkach obsługujących HTML5 możliwe są:

<a href="link/to/your/download/file" download>Download link</a>

Możesz także użyć tego:

<a href="link/to/your/download/file" download="filename">Download link</a>

Umożliwi to zmianę nazwy faktycznie pobieranego pliku.


użyłem tego samego kodu do pobrania pliku PFD i przetestowałem we wszystkich przeglądarkach, wszystkie są obsługiwane, ale w safari ten kod nie działa safari zamiast pobierania pliku pdf otwartego w nowej karcie.
Renish Khunt,

6
caniuse.com/#search=download%20attribute Działa w Chrome, Edge, Firefox, Opera i najnowszych przeglądarkach Androida 4.4+, a nie w Internet Explorer i Safari.
Bart Verkoeijen

Jak to zrobić, jeśli link tworzę dynamicznie po kliknięciu przycisku?
Nongthonbam Tonthoi

1
@NongthonbamTonthoi nie mogę używać javascript, aby dynamicznie przypisywać href do tagu
akshay kishore

1
To niekoniecznie zadziała, ponieważ jest ograniczone do adresów URL tego samego pochodzenia.
Nathan

22

Oprócz (lub zamiast) <a downloadwymienionego już atrybutu HTML5
zachowanie przeglądarki na dysku może zostać uruchomione przez następujący nagłówek odpowiedzi http:

Content-Disposition: attachment; filename=ProposedFileName.txt;

Tak było przed HTML5 (i nadal działa z przeglądarkami obsługującymi HTML5).


4
Ale to wymaga implementacji po stronie serwera, prawda?
Lombas,

@Lombas tak, tylko serwer może ustawić nagłówki odpowiedzi http.
Myobis,

Czy to pełna odpowiedź? Musisz także wysłać nagłówek typu zawartości i przeczytać plik, aby wymusić pobranie. Może chcesz i to do twojej odpowiedzi. Pełna odpowiedź tutaj: stackoverflow.com/a/1465631/2757916 .
Govind Rai,

jest to idealne do implementacji po stronie serwera, po prostu precyzyjne także typ zawartości. jest dobrze obsługiwany w porównaniu z downloadatrybutem
william.eyidi

9

Link do pobrania byłby linkiem do zasobu, który chcesz pobrać. Jest skonstruowany w taki sam sposób, jak każdy inny link:

<a href="path to resource.name of file">Link</a>

<a href="files/installer.exe">Link to installer</a>

8

Aby połączyć się z plikiem, wykonaj to samo co inne łącze do strony:

<a href="...">link text</a>

Aby wymusić pobieranie rzeczy, nawet jeśli mają one wbudowaną wtyczkę (Windows + QuickTime = ugh), możesz użyć tego w swoim htaccess / apache2.conf:

AddType application/octet-stream EXTENSION

Dzięki! jest to o wiele prostsze i dotyczy całego serwera! : DI znalazł ten link, który rozwija trochę więcej. Dziękuję Ci. htaccess-guide.com/adding-mime-types
Joe DF

Spowoduje to, że wszystkie pliki tego typu zostaną pobrane. W porządku, jeśli tego właśnie chcesz, ale może powodować ataki, jeśli zapomnisz i chcesz, aby inny plik tego typu wyświetlał się w przeglądarce zamiast pobierania.
TecBrat,

4

Ten wątek jest już prawdopodobnie starożytny, ale działa w html5 dla mojego pliku lokalnego.

W przypadku plików pdf:

<p><a href="file:///........example.pdf" download target="_blank">test pdf</a></p>

Powinno to otworzyć plik pdf w nowym oknie i pozwolić ci go pobrać (przynajmniej w Firefoksie). W przypadku każdego innego pliku po prostu nadaj mu nazwę pliku. W przypadku zdjęć i muzyki warto je jednak przechowywać w tym samym katalogu, co witryna. Tak by było

<p><a href="images/logo2.png" download>test pdf</a></p>

2

Atrybut pobierania nie działa w IE, całkowicie ignoruje „pobieranie”. Pobieranie nie działa w przeglądarce Firefox, jeśli odnośnik wskazuje na zdalną stronę. Przykład Odina nie działa w przeglądarce Firefox 41.0.2.


1

Jest jeszcze jedna subtelność, która może tu pomóc.

Chcę mieć linki, które umożliwiają zarówno odtwarzanie i wyświetlanie w przeglądarce, jak i jedno do czystego pobierania. Nowy atrybut pobierania jest w porządku, ale nie działa cały czas, ponieważ przymus przeglądarki do odtwarzania lub wyświetlania pliku jest nadal bardzo silny.

ALE .. polega to na sprawdzeniu rozszerzenia nazwy pliku URL! Nie chcesz majstrować przy mapowaniu rozszerzeń serwera, ponieważ chcesz dostarczyć ten sam plik na dwa różne sposoby. W przypadku pobierania można go oszukać, łącząc plik z nazwą, która jest nieprzezroczysta dla tego mapowania rozszerzenia, wskazując go, a następnie używając funkcji zmiany nazwy pobierania, aby naprawić nazwę.

<a target="_blank" download="realname.mp3" href="realname.UNKNOWN">Download it</a>
<a target="_blank" href="realname.mp3">Play it</a>

Miałem nadzieję, że po prostu wyrzucenie fikcyjnego zapytania na końcu lub w inny sposób zaciemnienie rozszerzenia zadziała, ale niestety tak nie jest.


0

Atrybut pobierania jest nowy dla <a>tagu w HTML5

<a href="http://www.odin.com/form.pdf" download>Download Form</a>
lub
<a href="http://www.odin.com/form.pdf" download="Form">Download Form</a>

Wolę ten pierwszy, który jest lepszy od jakiegokolwiek rozszerzenia.


0

Możesz pobrać na różne sposoby, podążając moją drogą. Chociaż pliki mogą nie zostać pobrane z powodu braku zezwolenia na wyskakujące okienka, ale w twoim środowisku będzie to działać idealnie

<div className="col-6">
                    <a  download href="https://www.w3schools.com/images/myw3schoolsimage.jpg" >Test Download </a>
                </div>

kolejna ta również zawiedzie z powodu opcji „X-Frame-Options” na „sameorigin”.

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download>
  <img src="https://www.w3schools.com/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>


-3

Lubię to

<a href="www.yoursite.com/theThingYouWantToDownload">Link name</a>

Tak więc plik name.jpg na stronie example.com wyglądałby tak

<a href="www.example.com/name.jpg">Image</a>

Problem z tym ostatnim polega na tym, że otworzy się w przeglądarce, a nie będzie oferowany do pobierania i zapisywania.
Pekka

9
Nie zadziała; przeglądarka potraktuje to jako link względny do ./www.example.com/name.jpg- musisz użyć http://dla linków bezwzględnych z określoną domeną.
Delan Azabani,

-7

wiem, że się spóźniłem, ale to właśnie dostałem po 1 godzinie poszukiwań

 <?php 
      $file = 'file.pdf';

    if (! file) {
        die('file not found'); //Or do something 
    } else {
       if(isset($_GET['file'])){  
        // Set headers
        header("Cache-Control: public");
        header("Content-Description: File Transfer");
        header("Content-Disposition: attachment; filename=$file");
        header("Content-Type: application/zip");
        header("Content-Transfer-Encoding: binary");
        // Read the file from disk
        readfile($file); }
    }

    ?>

i dla linku do pobrania zrobiłem to

<a href="index.php?file=file.pdf">Download PDF</a>

6
To jest okropne. Kiedy widzę taki link do pobrania, muszę oprzeć się chęci wypróbowania pliku index.php? File = index.php, który w implementacji kopiowania / wklejania twojego kodu ostatecznie dałby złośliwej osobie dostęp do bazy danych i kto wie co.
M.Stramm

1
Kiepski pomysł. Po pierwsze, ponieważ sprawiasz, że Twój serwer działa więcej niż to konieczne. Po drugie, ponieważ użytkownicy mogą pobrać dowolny plik: p
José Neto
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.