Bagaimana Anda menempatkan opsi unduhan di html?

Ada begitu banyak unduhan dari situs web setiap hari, kami bahkan tidak dapat menghitungnya di luar imajinasi. Namun sebagai seorang programmer, Anda juga harus tahu tentang membuat tautan unduhan untuk diri sendiri sehingga ketika Anda perlu menambahkannya ke situs web Anda, akan mudah bagi Anda untuk menambahkan fitur ini. Pada artikel ini, kita akan belajar cara membuat link download dengan html

Tautan Unduhan adalah tautan yang akan mengunduh file tertentu ketika pengguna mengkliknya. Sekarang, mari kita bicara tentang atribut yang akan digunakan dalam kode saat menulisnya. Atribut "unduh" digunakan untuk membuat tautan dapat diunduh. Ini akan menentukan target (pdf, zip, jpg, doc, dll) yang akan diunduh hanya ketika pengguna mengklik tautan.  

Tautan unduhan adalah tautan yang digunakan untuk mengunduh file dari server ke direktori browser di disk lokal

Kode tautan unduhan ditulis sebagai

Unduh berkas

Kode akan membuat tautan ini

Unduh berkas

File pengujian harus ada di server web

Kode tersebut memiliki bagian-bagian berikut

• adalah tag tautan
• atribut href mengatur file untuk diunduh
• Unduh File adalah teks tautan
• adalah tag akhir tautan

Lihat juga

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_ bukan asal yang sama dengan situs, 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

  Jika Anda menghosting file Anda di AWS, ini mungkin cocok untuk Anda. Kodenya sangat mudah dipahami. Karena browser tidak mendukung tautan unduhan asal yang sama, 1 cara untuk mengatasinya adalah dengan mengonversi URL gambar menjadi URL base64. Kemudian, Anda dapat mengunduhnya secara normal

      var canvas = document.createElement("canvas")
      var ctx = canvas.getContext('2d')
  
      var img = new Image()
      img.src = your_file_url + '?' + new Date().getTime();
      img.setAttribute('crossOrigin', '')
  
      var array = your_file_url.src.split("/")
      var fileName = array[array.length - 1]
  
      img.onload = function() {
          canvas.width = img.naturalWidth
          canvas.height = img.naturalHeight
          ctx.drawImage(img,
              0, 0, img.naturalWidth, img.naturalHeight,
              0, 0, canvas.width, canvas.height)
  
          var dataUrl = canvas.toDataURL("image/png", 1)
  
          var a = document.createElement('a')
          a.href = dataUrl
          a.download = fileName
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
      }
  

  _

  Bagaimana cara menambahkan opsi unduhan di HTML?

  Atribut unduhan hanya digunakan jika atribut href disetel . Nilai atribut akan menjadi nama file yang diunduh. Tidak ada batasan pada nilai yang diizinkan, dan browser akan secara otomatis mendeteksi ekstensi file yang benar dan menambahkannya ke file (. img,.

  Bagaimana cara menambahkan file yang dapat diunduh ke situs web saya dalam HTML?

  Berikut adalah langkah-langkah yang dapat Anda lakukan untuk membuat tautan unduhan dalam HTML. .

  Use the HTML anchor tag < a > … < /a > to make the file appear as a link on the webpage..

  Setel properti href ke file unduhan

  Tambahkan atribut unduhan setelah menyetel pengalihan href

  Bagaimana cara menambahkan tombol unduh PDF di HTML?

  Buat contoh untuk mengunduh file pdf menggunakan atribut unduh tag . . .

  <. DOCTYPE html>

  Download pdf file using tag download attribute..

  .

  Bagaimana cara menggunakan ikon unduhan di HTML?

  First thing: save the icon that you want to use as a png or jpg ( i think png works better for an icon). Then in the html file you can use the tag and the attribute "scr" to target the image that you want to load on your project. Il suggest you the track "how to make a website" to learn the basic of html and css.