Hasilkan dan unduh file menggunakan Javascript ?
Bayangkan Anda menggunakan Google Chrome dan Anda telah mengaktifkan opsi "Buka otomatis file yang diunduh", dan untuk nasib buruk Anda, Anda masuk ke situs web jahat dan itu menghasilkan unduhan file yang tidak dikenal. Anda tahu bagaimana cerita ini berakhir
Namun, di browser terbaru ekstensi file yang tidak diketahui atau jarang diunduh diblokir dan prompt muncul jika Anda benar-benar ingin membuka file itu (setidaknya di Chrome)
Oleh karena itu, pengunduhan file secara otomatis sulit dicapai dalam beberapa tahun terakhir, tetapi sekarang dengan diperkenalkannya HTML5, tugas ini menjadi lebih mudah untuk dicapai.
Pada artikel ini kami akan menunjukkan kepada Anda beberapa trik untuk membuat dan mengunduh file secara langsung menggunakan Javascript murni
Fungsi unduhan yang diterapkan sendiri
Fungsi sederhana berikut memungkinkan Anda menghasilkan unduhan file langsung di browser tanpa menghubungi server mana pun. Ia bekerja pada semua browser Siap HTML5 karena menggunakan atribut unduh dari elemen <a>
function download(filename, text) { var element = document.createElement('a'); element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); element.setAttribute('download', filename); element.style.display = 'none'; document.body.appendChild(element); element.click(); document.body.removeChild(element); } // Start file download. download("hello.txt","This is the content of my file :)");Atribut unduhan menentukan bahwa target akan diunduh ketika pengguna mengklik hyperlink. Atribut ini hanya digunakan jika atribut href disetel
Anda dapat melihat cuplikan ini beraksi di biola berikut
Menggunakan perpustakaan
Buat perpustakaan, bukan perang. FileSaver. js mengimplementasikan antarmuka saveAs()_ FileSaver di browser yang tidak mendukungnya secara asli
Jika Anda perlu menyimpan file yang sangat besar lebih besar dari batasan ukuran blob atau tidak memiliki cukup RAM, lihat StreamSaver yang lebih canggih. js yang dapat menyimpan data langsung ke hard drive secara asinkron dengan kekuatan API aliran baru. Itu akan memiliki dukungan untuk kemajuan, pembatalan dan mengetahui kapan selesai menulis.
Cuplikan berikut memungkinkan Anda membuat file (dengan ekstensi apa pun) dan mengunduhnya tanpa menghubungi server apa pun
var content = "What's up , hello world"; // any kind of extension (.txt,.cpp,.cs,.bat) var filename = "hello.txt"; var blob = new Blob([content], { type: "text/plain;charset=utf-8" }); saveAs(blob, filename);_Tabel berikut menunjukkan kompatibilitas FileSaver. js di browser yang berbeda
BrowserBentuk sebagai namaFileUkuran GumpalanMaksDependensiFirefox 20+BlobYa800 MiBNoneFirefox < 20data. URINon/aBlob. jsChromeBlobYes500 MiBNoneChrome untuk AndroidBlobYes500 MiBNoneEdgeBlobYes?NoneIE 10+BlobYes600 MiBNoneOpera 15+BlobYes500 MiBNoneOpera < 15data. URINon/aBlob. jsSafari 6. 1+*BlobNo?NoneSafari < 6data. URINon/aBlob. js
Catatan. meskipun mendukung browser terbaru, ada beberapa trik yang perlu Anda ketahui untuk memberikan dukungan penuh
yaitu < 10
Dimungkinkan untuk menyimpan file teks di IE