Di bawah ini kita akan mempelajari cara membuat tautan unduhan dengan HTML.
Link Download
Kita dapat menggunakan atribut unduhan HTML untuk menentukan bahwa target akan diunduh ketika pengguna mengklik hyperlink.
Contoh
<!DOCTYPE html> <html> <body> <p>Klik pada gambar untuk mendownload gambar:<p> <a href="https://dosenit.com/wp-content/uploads/2021/02/136-1369892_avatar-people-person-business-user-man-character-avatar.png" download> <img src="https://dosenit.com/wp-content/uploads/2021/02/136-1369892_avatar-people-person-business-user-man-character-avatar.png" alt="Avatar" width="104" height="142"> </a> <p><b> Catatan: </b> Atribut download tidak didukung di Edge versi 12, IE, Safari 10 (dan sebelumnya) atau Opera versi 12 (dan sebelumnya). </p> </body> </html>
Atribut download hanya digunakan jika atribut href disetel.
Nilai atributnya adalah nama file yang diunduh. Tidak ada batasan pada nilai yang diperbolehkan dan browser akan secara otomatis mendeteksi ekstensi file yang benar dan menambahkannya ke file (.img, .pdf, .txt, .html, dll.).
Bisa juga menentukan nilai untuk atribut download, yang akan menjadi nama file baru dari file yang didownload. Jika nilainya dihilangkan, maka nama file asli digunakan.
Contoh
Tentukan nilai untuk atribut download, yang akan menjadi nama file baru dari file yang didownload (“w3logo.jpg” bukan “myw3schoolsimage.jpg”):
<!DOCTYPE html> <html> <body> <p>Klik pada gambar untuk mendownload gambar:<p> <a href="https://dosenit.com/wp-content/uploads/2021/02/136-1369892_avatar-people-person-business-user-man-character-avatar.png" download="avatar123"> <img src="https://dosenit.com/wp-content/uploads/2021/02/136-1369892_avatar-people-person-business-user-man-character-avatar.png" alt="Avatar" width="104" height="142"> </a> <p> Perhatikan bahwa nama file dari file yang diunduh akan disimpan sebagai "avatar123.png" bukan "namafile.png". </p> <p> <b> Catatan: </b> Atribut download tidak didukung di Edge versi 12, IE, Safari 10 (dan sebelumnya) atau Opera versi 12 (dan sebelumnya). </p> </body> </html>
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung atribut tersebut.
| Attribute | Chrome | Edge | Mozila | Safari | Opera |
|---|---|---|---|---|---|
| download | 14.0 | 13.0 | 20.0 | 10.1 | 15.0 |
