Namun dibatasi oleh browser, dalam banyak kasus kami hanya dapat memberikan tautan dan membiarkan pengguna mengeklik untuk membuka -> Simpan Sebagai. Seperti tautan berikut:
Copy kode kodenya sebagai berikut:
<a href="file.js">file.js</a>
Ketika pengguna mengklik link ini, browser akan membuka dan menampilkan konten file yang ditunjuk oleh link tersebut. HTML5 menambahkan atribut download ke tag a. Selama atribut ini ada, ketika link diklik, browser tidak akan membuka file yang ditunjuk oleh link tersebut, namun mendownloadnya (saat ini hanya didukung oleh Chrome, Firefox dan Opera).
Saat mendownload, nama link akan langsung digunakan sebagai nama file, namun dapat diubah. Cukup tambahkan nama file yang ingin didownload, seperti: download="not-a-file.js".
Namun ini belum cukup. Cara di atas hanya cocok digunakan saat file ada di server. Bagaimana jika Anda ingin browser mendownload konten yang dihasilkan oleh js di sisi browser?
Sebenarnya masih ada cara untuk melakukannya. Saya yakin banyak orang yang pernah mendengar kata DataURI. Yang lebih umum adalah src dari gambarnya, seperti:
Copy kode kodenya sebagai berikut:
<img src="data:gambar/gif;base64,R0lGOXXXXX">
Penjelasan DataURI bisa dipindahkan disini, saya tidak akan menjelaskannya disini.
Jadi, sekarang ada hukum yang harus dipatuhi saat mendownload konten yang dihasilkan oleh js. Dirangkum menjadi metode sebagai berikut:
Copy kode kodenya sebagai berikut:
fungsi downloadFile(aLink, Nama file, konten){
aLink.download = Nama file;
aLink.href = "data:teks/polos," + konten;
}
Setelah memanggil downloadFile, pengguna mengklik link untuk memicu pengunduhan browser.
Namun, itu tidak cukup. Cara di atas memiliki dua kekurangan, yang akan menyebabkan hilangnya banyak gadis malas:
Ada batasan pada jenis file yang dapat diunduh. Apa yang harus saya lakukan jika ingin mengunduh foto yang telah diproses?
Anda harus mengklik lagi untuk mendownload, itu terlalu merepotkan.
Untuk mengatasi masalah jenis file, Anda dapat menggunakan API baru browser (URL.createObjectURL) untuk menyelesaikan masalah. URL.createObjectURL biasanya digunakan untuk membuat DataURI gambar untuk menampilkan gambar dan biarkan browser Membantu kami mengatur jenis file.
Parameter URL.createObjectURL adalah objek File atau objek Blob. Objek File adalah file yang dipilih melalui input[type=file]. Objek Blob adalah objek biner besar.
Sekarang, kita hanya perlu membuat ObjectURL dengan konten dan menugaskannya ke aLink untuk menyelesaikan masalah batasan jenis file.
Pengunduhan file secara otomatis juga cukup mudah. Anda dapat membuat sendiri acara klik UI dan kemudian secara otomatis memicunya untuk mencapai pengunduhan otomatis.
Sekarang mari kita lihat kode terakhirnya:
Copy kode kodenya sebagai berikut:
fungsi unduhFile(Nama file, konten){
var aLink = dokumen.createElement('a');
var gumpalan = gumpalan baru([konten]);
var evt = dokumen.createEvent("HTMLEvents");
evt.initEvent("click", false, false);//initEvent tanpa dua parameter terakhir akan melaporkan kesalahan pada FF. Terima kasih kepada Barret Lee atas masukannya.
aLink.download = Nama file;
aLink.href = URL.createObjectURL(gumpalan);
aLink.dispatchEvent(evt);
}
Sekarang, segera setelah downloadFile dipanggil, file tersebut akan otomatis diunduh.
Catatan: Saat ini (2014-01) Blob dan URL.createObjectURL tidak perlu lagi menambahkan awalan pribadi di browser standar, sehingga Anda dapat menggunakannya dengan percaya diri~~ Jika Anda khawatir, Anda dapat memeriksa Bisakah Saya Menggunakannya.