Ilustrasi Ikon Unduhan
Dalam pengembangan web, elemen dasar untuk membuat tautan adalah menggunakan tag <a> (anchor). Secara default, ketika pengguna mengklik tautan, browser akan menavigasi ke sumber daya yang ditunjuk oleh atribut href. Namun, bagaimana jika kita ingin memaksa browser untuk mengunduh file alih-alih menampilkannya di jendela browser? Di sinilah atribut global download berperan penting.
Atribut download pada tag <a> adalah atribut Boolean yang, ketika disertakan, memberi tahu browser untuk mengunduh sumber daya yang ditautkan alih-alih menavigasinya. Ini sangat berguna untuk menyajikan dokumen PDF, arsip ZIP, atau gambar secara langsung sebagai unduhan.
Sintaksnya sangat sederhana. Anda hanya perlu menambahkan atribut download ke tag <a>.
Contoh Tautan Unduh:
<a href="path/ke/file_anda.pdf" download>Unduh Dokumen Penting</a>
Jika atribut download digunakan tanpa nilai (seperti contoh di atas), browser akan menggunakan nama file dari URL href sebagai nama file default yang akan disimpan oleh pengguna. Misalnya, jika href mengarah ke /assets/laporan_q3_final.pdf, file yang terunduh akan bernama laporan_q3_final.pdf.
Kekuatan sebenarnya dari atribut download muncul ketika Anda memberikannya nilai string. Nilai ini akan menjadi nama file yang disarankan oleh browser saat menyimpan. Ini memungkinkan Anda untuk menyesuaikan nama file tanpa mengubah struktur URL sumber daya asli Anda.
Contoh Memberi Nama File Khusus:
<a href="api/get/document.php?id=452" download="Laporan_Keuangan_Bulan_Ini.xlsx">Download Data Excel</a>
Dalam kasus di atas, meskipun URL sumbernya mungkin kompleks atau memiliki parameter dinamis (seperti yang sering terjadi pada tautan yang menghasilkan konten secara langsung), pengguna akan melihat file tersimpan dengan nama yang rapi: Laporan_Keuangan_Bulan_Ini.xlsx.
Meskipun atribut ini sangat kuat, ada beberapa batasan penting yang perlu diperhatikan oleh pengembang web saat merancang pengalaman html a download:
download hanya berfungsi dengan andal jika sumber daya yang ditautkan berada di domain (origin) yang sama dengan dokumen HTML saat ini. Jika Anda mencoba memaksa unduhan dari domain yang berbeda (misalnya, dari CDN pihak ketiga), browser sering kali mengabaikan atribut download dan hanya menavigasi ke URL tersebut.Content-Disposition: attachment; filename="namafile.pdf". Namun, atribut download sering kali dapat menggantikan kebutuhan ini untuk sumber daya lokal.
Pada perangkat mobile, terutama sistem operasi seperti iOS dan Android, perilaku tautan unduhan sedikit berbeda dibandingkan desktop. Ketika pengguna mengklik tautan dengan atribut download pada ponsel, mereka biasanya akan diarahkan ke layar pratinjau jika file tersebut adalah tipe yang dapat dilihat (seperti PDF atau gambar) sebelum konfirmasi akhir untuk penyimpanan lokal. Namun, untuk file ZIP atau format terkompresi lainnya, unduhan langsung biasanya dipicu.
Memastikan responsifitas desain sangat penting. Karena kita menargetkan tampilan web mobile, pastikan ukuran tombol dan teks tautan html a download cukup besar untuk interaksi sentuh yang mudah. Struktur CSS yang digunakan di atas (menggunakan flex-direction: column pada body) memastikan konten menumpuk secara vertikal, yang optimal untuk layar sempit.
Atribut download adalah alat sederhana namun fundamental dalam toolbox HTML5. Dengan menyertakannya pada tag <a>, pengembang dapat secara efektif mengendalikan bagaimana browser menangani tautan ke file eksternal, mengubah navigasi menjadi tindakan penyimpanan langsung. Mengingat batasan Same-Origin Policy, ia paling efektif digunakan untuk aset yang berada dalam ekosistem domain situs web Anda sendiri.