Bagaimana cara kerja unduhan html?

Ini gila tapi saya tidak tahu bagaimana melakukan ini, dan karena kata-katanya sangat umum, sulit untuk menemukan apa yang saya butuhkan di mesin pencari. Saya pikir ini seharusnya mudah dijawab

Saya ingin unduhan file sederhana, yang akan melakukan hal yang sama seperti ini

Download!

Tapi saya ingin menggunakan tombol HTML, mis. g. salah satu dari ini

Download!

Demikian juga, apakah mungkin memicu pengunduhan sederhana melalui JavaScript?

$("#fileRequest").click(function(){ /* code to download? */ });

Saya pasti tidak mencari cara untuk membuat jangkar yang terlihat seperti tombol, menggunakan skrip back-end apa pun, atau mengotak-atik header server atau tipe pantomim

Default tag jangkar Anda adalah tautan navigasi, itu akan mengarah ke tautan yang Anda tentukan di atribut href Anda

Namun, ketika Anda menambahkan atribut download, itu akan mengubahnya menjadi tautan unduhan. Meminta file Anda untuk diunduh. File yang diunduh akan memiliki nama yang sama dengan nama file aslinya. Namun, Anda juga dapat mengatur nama file khusus dengan memberikan nilai ke atribut unduhan 🤩

<a href="/samanthaming.png" download>
  Download with original filename -> samanthaming.png
</a>

<a href="/samanthaming.png" download="logo">
  Download with custom filename -> logo.png
</a>

Unduh Pembatasan

Atribut download hanya berfungsi untuk URL asal yang sama. Jadi, jika href tidak berasal dari situs yang sama, itu tidak akan berfungsi. Dengan kata lain, Anda hanya dapat mengunduh file milik situs web tersebut. Atribut ini mengikuti garis besar aturan yang sama dalam kebijakan asal yang sama

Apa itu kebijakan asal yang sama?

Kebijakan ini merupakan mekanisme keamanan yang membantu mengisolasi dokumen yang berpotensi berbahaya dan mengurangi kemungkinan vektor serangan. Jadi apa artinya atribut download kita? . Mari kita lihat sebuah contoh

Anda dapat mempelajari lebih lanjut tentang kebijakan ini di MDN Web Doc

Dukungan Peramban

Fitur ini tidak didukung oleh semua browser (uhuk uhuk IE). Jadi jika ada browser tertentu yang Anda targetkan, pastikan Anda memeriksa kompatibilitasnya sebelum menggunakan atribut ini

Apa gunanya memberikan nama file baru?

Pertanyaan. Apa yang akan menjadi kasus penggunaan untuk ini?

Tanggapan saya. Ya, itu akan ideal. Namun terkadang Anda mungkin memiliki konvensi penamaan file khusus yang perlu Anda ikuti yang mungkin tidak masuk akal bagi pengguna. Jadi bisa memberikan nama file khusus bisa bermanfaat 👍

• @dj_yanic. kasus penggunaan yang baik. Saya melacak nomor versi resume saya, tetapi perekrut yang mengunduhnya dari situs web saya tidak perlu mengetahui versi apa itu

• @membangun. naskah. catatan. Anda juga dapat mengubah nama file secara terprogram, untuk memasukkan tanggal atau nama pengguna misalnya. Tip rapi

Umpan Balik Komunitas

• @vikneshwaran_jk. Saya telah menggunakan atribut unduhan ini di situs web portofolio pribadi saya untuk membuat resume saya dapat diunduh (pdf). Cukup kuat👌

• Chriskelly7777. Tip yang sangat berguna. Sedikit gotcha yang membuat saya lengah pada awalnya adalah bahwa ini hanya berfungsi pada permintaan asal yang sama, bukan lintas asal, di mana itu diabaikan. Stack Overflow- hanya untuk menyelamatkan orang lain mencabut rambutnya sendiri seperti yang saya lakukan

  Chrome sekarang mendukung atribut download spesifikasi HTML baru ke a elemen. Saat digunakan, atribut ini menandakan bahwa sumber daya yang ditunjuknya harus diunduh oleh browser daripada dinavigasi ke sana

  Dari

  Atribut download, jika ada, menunjukkan bahwa penulis bermaksud agar hyperlink digunakan untuk mengunduh sumber daya. Atribut mungkin memiliki nilai; . Tidak ada batasan pada nilai yang diizinkan, tetapi penulis diperingatkan bahwa sebagian besar sistem file memiliki batasan sehubungan dengan tanda baca apa yang didukung dalam nama file, dan agen pengguna cenderung menyesuaikan nama file sesuai dengan itu. Atribut selanjutnya dapat diberi nilai, untuk menentukan nama file yang digunakan agen pengguna saat menyimpan sumber daya dalam sistem file. Nilai ini dapat diganti oleh parameter Content-Disposition header HTTP filename

  Misalnya, mengklik tautan berikut akan mengunduh. png sebagai "MyGoogleLogo. png" alih-alih menavigasi ke nilai href nya. unduh saya. Markup untuk ini adalah sebagai berikut

  <a href="http://web-central.appspot.com/.../web-fundamentals-icon192x192.png" download="WebfundamentalsLogo">download me</a>

  _

  Manfaat nyata dari a[download]_ adalah saat bekerja dengan dan sistem file. URL URL. Ini akan memberi pengguna cara untuk mengunduh konten yang dibuat/dimodifikasi dalam aplikasi Anda

  Demo Penuh

  Satu hal yang perlu diperhatikan adalah bahwa dalam contoh di atas, gambar memiliki asal yang sama dengan situs web. Jika Anda mencoba menggunakan tautan gambar dari asal yang berbeda, tautan tersebut mungkin tidak berfungsi sebagai tautan navigasi daripada tautan unduhan. Ini karena banyak versi browser tidak mendukung kebijakan pengunduhan pada file lintas asal. Misalnya versi Chrome sebelum 65 memungkinkan pengunduhan file lintas asal dan tidak digunakan lagi di versi yang lebih baru. Baca ini untuk detail lebih lanjut. Anda dapat menggunakan tajuk Content-Disposition untuk memaksa pengunduhan dari sumber lain

  Bagaimana cara kerja atribut unduhan HTML?

  Atribut unduhan menentukan bahwa target (berkas yang ditentukan dalam atribut href) akan diunduh saat pengguna mengeklik hyperlink . Nilai opsional atribut unduhan akan menjadi nama baru file setelah diunduh.

  Apa artinya mengunduh sebagai HTML?

  Atribut unduhan HTML digunakan untuk mengunduh elemen saat pengguna mengklik hyperlink . Ini hanya digunakan ketika atribut href disetel. Nama file yang diunduh akan menjadi nilai atribut. Nilai atribut akan menjadi nama file yang diunduh.

  Bagaimana cara kerja unduhan HTTP?

  Unduhan Hypertext Transfer Protocol (HTTP) menggunakan protokol yang sama dengan menjelajahi situs web untuk mengirim data file . Ini adalah cara paling populer untuk mengunduh file dari internet. Semua browser web menggunakan ini untuk mengunduh file secara langsung. HTTP tidak mendukung menjeda atau melanjutkan unduhan yang gagal secara asli.

  Bagaimana cara mengunduh kode dalam HTML?

  Cara menulis tautan unduhan dalam HTML. Tautan unduhan adalah tautan yang digunakan untuk mengunduh file dari server ke direktori browser di disk lokal. .

  adalah tag tautan

  atribut href mengatur file untuk diunduh

  Unduh File adalah teks tautan

  adalah tag akhir tautan