Pada artikel ini, kita akan mempelajari cara mengunduh file menggunakan JavaScript. File pengunduhan otomatis membantu kami mengambil file langsung dari URL dengan fungsi JavaScript tanpa menghubungi server mana pun. Kami akan mencapai ini menggunakan fungsi tertulis khusus kami dan menggunakan atribut unduhan HTML 5
Gunakan download Atribut dalam HTML untuk Mengunduh File
Atribut download_ dalam HTML 5 digunakan untuk mengunduh file saat pengguna mengklik hyperlink. Ini digunakan dengan tag jangkar - dan . Kami diharuskan untuk mengatur atribut href_ yang menentukan sumber file. Nilai atribut download_ menentukan nama file yang diunduh. Jika nilai ini dihilangkan, maka nama file yang diunduh akan sama dengan nama file aslinya
Download
Pada kode di atas, kita mengunduh gambar apple.png menggunakan atribut download. Kami pertama-tama membuat tag jangkar yang berisi alamat gambar dan menambahkan atribut download ke dalamnya. Kemudian kami juga membuat tombol unduh untuk memudahkan mengunduh file
Menggunakan Fungsi yang Ditulis Khusus untuk Membuat dan Mengunduh File Teks dalam JavaScript
Pendekatan ini akan membuat data teks dengan cepat dan kemudian menggunakan JavaScript untuk membuat file teks dan kemudian mengunduhnya
Unduh Algoritma
- Buat area teks untuk memasukkan data teks
- Buat tag jangkar _menggunakan properti
How to Download files Using JavaScript
3 dan tetapkan atribut download dan href padanya - Gunakan
How to Download files Using JavaScript
_6 untuk menyandikan teks dan menambahkannya ke URI sebagai komponennya. Ini akan membantu kita mengganti karakter khusus tertentu dengan kombinasi escape sequence - Setel jenis tanggal ke
How to Download files Using JavaScript
_7 dan enkode ke How to Download files Using JavaScript
8 menggunakan How to Download files Using JavaScript
9 sebagai nilai atribut href - Tambahkan elemen yang dibuat ini ke badan dokumen (halaman HTML)
- Gunakan How to download files using JavaScript Download Image _1 untuk mensimulasikan klik mouse
- Hapus elemen dari badan dokumen (halaman HTML)
Lampirkan pendengar acara yang mencari klik ke tombol unduh. Panggil fungsi unduhan dengan teks dari area teks dan nama file file teks sebagai parameter
How to Download files Using JavaScript
_
Gunakan How to download files using JavaScript Download Image _2 Perpustakaan untuk Mengunduh File
Dalam pendekatan ini, kami akan menggunakan pustaka How to download files using JavaScript Download Image 2 untuk mengunduh file. Sebelum melanjutkan dengan detail pendekatan, mari kita pahami apa itu How to download files using JavaScript Download Image 4, tipe data yang digunakan untuk mengunduh file menggunakan Axios
How to download files using JavaScript Download Image _4
How to download files using JavaScript Download Image 4 adalah singkatan dari How to download files using JavaScript Download Image 7 dan merupakan tipe data yang dapat menyimpan data biner. Ini mewakili data seperti program, cuplikan kode, objek multimedia, dan hal-hal lain yang tidak mendukung format asli JavaScript
Unduh File
- Buat permintaan How to download files using JavaScript Download Image _8 Axios dengan URL sebagai sumber file dan How to download files using JavaScript Download Image 9 sebagai download0
- Selesaikan janji yang dikembalikan oleh permintaan Axios dengan melakukan langkah-langkah berikut
- Buat DOMString yang berisi URL yang mewakili objek Blob
- Buat tag jangkar _menggunakan properti
How to Download files Using JavaScript
3 dan tetapkan atribut download dan href padanya - Tetapkan href_ sebagai URL yang dibuat pada langkah pertama dan atribut download sebagai nama file yang diunduh
- Lampirkan tautan ini ke dokumen dan simulasikan klik menggunakan metode download7
- Hapus tautan ini dari dokumen
How to download files using JavaScript Download Image _
Di sini kami mendapatkan gambar acak dari sebuah situs, gunakan How to download files using JavaScript Download Image 2 untuk meminta gambar tersebut dalam bentuk blob, lalu unduh menggunakan atribut download tag jangkar. Metode ini tidak terbatas pada teks biasa yang dimasukkan oleh pengguna seperti metode sebelumnya. Kami dapat meminta data apa pun dari API dan kemudian menggunakan pendekatan ini untuk menyimpan data di dalam komputer kami
Semua browser utama mendukung semua metode di atas kecuali metode yang menggunakan pustaka How to download files using JavaScript Download Image 2. Internet Explorer masih tidak mendukung janji ES6 asli, dan Axios sangat bergantung padanya