Bagaimana saya bisa membuat tautan unduhan dalam HTML?

Saya punya ide dasar tentang HTML. Saya ingin membuat tautan unduhan di situs web sampel saya, tetapi saya tidak tahu cara membuatnya. Bagaimana cara membuat tautan untuk mengunduh file daripada mengunjunginya?

Jawaban ini sudah usang. Kami sekarang memiliki downloadatribut . (lihat juga tautan ini ke MDN )

Jika dengan "tautan unduhan" yang Anda maksud adalah tautan ke suatu file untuk diunduh, gunakan

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

yang target=_blankakan membuat jendela browser baru muncul sebelum download dimulai. Jendela itu biasanya akan ditutup ketika browser menemukan bahwa sumber daya adalah unduhan file.

Perhatikan bahwa jenis file yang dikenal oleh browser (mis. Gambar JPG atau GIF) biasanya akan dibuka di dalam browser.

Anda dapat mencoba mengirim tajuk yang tepat untuk memaksa unduhan seperti yang dijelaskan misalnya di sini . (skrip sisi server atau akses ke pengaturan server diperlukan untuk itu.)

Di browser modern yang mendukung HTML5, berikut ini dimungkinkan:

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

Anda juga dapat menggunakan ini:

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

Ini akan memungkinkan Anda untuk mengubah nama file yang sebenarnya sedang diunduh.

Selain itu (atau sebagai pengganti) <a downloadatribut HTML5 yang telah disebutkan, unduhan
peramban ke perilaku disk juga dapat dipicu oleh tajuk tanggapan http berikut:

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

Ini adalah cara yang harus dilakukan sebelum HTML5 (dan masih berfungsi dengan browser yang mendukung HTML5).

Tautan unduhan akan menjadi tautan ke sumber daya yang ingin Anda unduh. Ini dibangun dengan cara yang sama dengan tautan lainnya:

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

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

Untuk menautkan file, lakukan hal yang sama seperti tautan halaman lainnya:

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

Untuk memaksa sesuatu untuk mengunduh walaupun mereka memiliki plugin yang disematkan (Windows + QuickTime = ugh), Anda dapat menggunakan ini di htaccess / apache2.conf Anda:

AddType application/octet-stream EXTENSION

Utas ini mungkin sudah kuno sekarang, tetapi ini berfungsi dalam html5 untuk file lokal saya.

Untuk pdf:

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

Ini harus membuka pdf di windows baru dan memungkinkan Anda untuk mengunduhnya (setidaknya di firefox). Untuk file lain, cukup buat nama file. Untuk gambar dan musik, Anda ingin menyimpannya di direktori yang sama dengan situs Anda. Jadi itu akan seperti

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

Atribut unduhan tidak berfungsi di IE, itu mengabaikan "unduhan" sepenuhnya. Pengunduhan tidak berfungsi di Firefox jika href menunjuk ke situs jarak jauh. Jadi contoh Odin tidak berfungsi di Firefox 41.0.2.

Ada satu lagi kehalusan yang dapat membantu di sini.

Saya ingin memiliki tautan yang memungkinkan pemutaran dan tampilan di dalam peramban serta satu untuk diunduh murni. Atribut unduhan baru baik-baik saja, tetapi tidak berfungsi sepanjang waktu karena paksaan browser untuk memutar atau menampilkan file masih sangat kuat.

TAPI .. ini didasarkan pada pemeriksaan ekstensi pada nama file URL! Anda tidak ingin mengutak-atik pemetaan ekstensi server karena Anda ingin mengirimkan file yang sama dengan dua cara berbeda. Jadi untuk unduhan, Anda dapat membodohinya dengan menautkan file ke nama yang buram pada pemetaan ekstensi ini, menunjuk ke sana, dan kemudian menggunakan fitur ganti nama unduhan untuk memperbaiki nama.

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

Saya berharap hanya melempar pertanyaan tiruan di akhir atau mengaburkan ekstensi akan bekerja, tetapi sayangnya, tidak.

Atribut unduhan baru untuk <a>tag dalam HTML5

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

Saya lebih suka yang pertama lebih disukai sehubungan dengan ekstensi apa pun.

Anda dapat mengunduh dengan berbagai cara Anda dapat mengikuti cara saya. Meskipun file mungkin tidak diunduh karena izin 'boleh-popup' tidak disetel tetapi di lingkungan Anda, ini akan berfungsi dengan sempurna

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

satu lagi yang ini juga akan gagal karena 'X-Frame-Options' ke '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>

Seperti ini

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

Jadi file name.jpg di situs example.com akan terlihat seperti ini

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

saya tahu saya terlambat tetapi ini yang saya dapatkan setelah 1 jam pencarian

 <?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); }
    }

    ?>

dan untuk tautan yang dapat diunduh saya melakukan ini

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