Jak mogę utworzyć link do pobrania w HTML?

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ć?

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).

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.

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).

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>

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

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>

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.

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.

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.

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>

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>

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>