Mencipta dan Menyimpan Fail menggunakan HTML5/JavaScript
Mencipta dan menyimpan fail dalam pelayar web adalah tugas biasa, terutamanya apabila berurusan dengan dinamik kandungan. Walaupun mungkin untuk melibatkan pelayan dalam proses ini, ia boleh menjadi tidak cekap jika peranan pelayan adalah minimum. Soalan ini meneroka kemungkinan menggunakan JavaScript tulen untuk memudahkan penyimpanan fail dalam pelayar web tanpa melibatkan pelayan.
Cabaran: Menyimpan Fail dalam JavaScript
Pengguna telah membangunkan skrip yang menghuraikan fail Collada (format model 3D verbose) ke dalam format JSON yang lebih mudah diurus. Fail yang dihuraikan disimpan dalam memori dan pengguna ingin menyediakan cara untuk pengguna memuat turun fail yang diubah tanpa melibatkan pelayan.
Penyelesaian: HTML5 Blob dan Muat Turun Atribut
Penyelesaian terletak pada atribut HTML5 Blob dan Muat turun. Objek Blob membenarkan kami mencipta objek seperti fail dalam ingatan, manakala atribut Muat turun pada teg membolehkan kami menentukan nama fail dan memulakan muat turun.
Berikut ialah coretan kod yang menunjukkan proses :
function download(filename, text) { var blob = new Blob([text], {type: 'text/plain'}); var pom = document.createElement('a'); pom.setAttribute('href', URL.createObjectURL(blob)); pom.setAttribute('download', filename); if (document.createEvent) { var event = document.createEvent('MouseEvents'); event.initEvent('click', true, true); pom.dispatchEvent(event); } else { pom.click(); } }
Penggunaan:
Untuk menggunakan muat turun fungsi, hanya memanggilnya dengan nama fail dan teks yang dikehendaki untuk disimpan. Contohnya:
download('test.txt', 'Hello world!');
Ini akan mencipta fail bernama "test.txt" pada komputer pengguna dengan teks "Hello world!" ditulis kepadanya.
Keserasian:
Fungsi muat turun berfungsi dalam penyemak imbas moden yang menyokong atribut Blob dan Muat Turun. Ini termasuk:
Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyimpan Fail Dicipta dengan JavaScript dalam Pelayar Tanpa Menggunakan Pelayan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!