Javascript melaksanakan penyimpanan folder

Dalam beberapa tahun kebelakangan ini, dengan populariti storan awan, pengurusan folder telah diabaikan oleh ramai orang. Walau bagaimanapun, bagi sesetengah orang yang perlu kerap menggunakan fail luar talian, keperluan untuk folder storan tempatan masih sangat diperlukan. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi simpan folder.

1. Simpan satu fail

Dalam JavaScript, kaedah menyimpan fail adalah agak mudah. ​​Anda boleh menggunakan atribut tag dan muat turun dalam html5. Contoh kod:

var blob = new Blob([content]);  // content为需要保存的文本内容

var fileName = 'example.txt';

var a = document.createElement('a');

a.download = fileName;

a.href = URL.createObjectURL(blob);

a.click();

Seperti yang ditunjukkan di atas, mula-mula buat objek Blob dan nama fail fail kemudian buat teg, tetapkan atribut muat turun kepada nama fail dan tetapkan atribut href ke alamat URL daripada objek Blob, dan pencetus Peristiwa klik pada teg a sudah mencukupi.

2. Simpan folder

Namun, apabila kita perlu menyimpan berbilang fail, hanya menggunakan kaedah di atas tidak dapat memenuhi keperluan kita lagi. Kita perlu mempertimbangkan untuk membungkus berbilang fail ke dalam folder. Untuk situasi ini, kita boleh menggunakan perpustakaan JSZip.

JSZip ialah pustaka JavaScript sumber terbuka yang boleh mencipta, membaca dan menyahmampatkan zip fail dimampatkan di sebelah penyemak imbas. Berikut ialah contoh kod untuk menyimpan folder:

var zip = new JSZip();

zip.file("example1.txt", "content1");  // 将需要保存的文本内容添加到zip实例中
zip.file("example2.png", "content2");

zip.generateAsync({type:"blob"})  // 将zip打包成blob对象
.then(function(content) {
    saveAs(content, "example.zip");  // 调用FileSaver库将blob保存到本地
});

Seperti yang ditunjukkan di atas, mula-mula nyatakan pustaka JSZip kemudian tambahkan fail yang perlu disimpan ke contoh zip melalui kaedah zip.file() akhirnya; kaedah zip.generateAsync() kepada A contoh zip menghasilkan objek gumpalan. Ambil perhatian bahawa kaedah ini mengembalikan objek Promise dan perlu dirantai melalui kaedah itu. Akhir sekali, kita boleh menggunakan pustaka FileSaver untuk menyimpan objek gumpalan secara setempat untuk menyimpan folder.

3. Isu Keserasian

Perlu diingatkan bahawa keserasian kaedah di atas adalah berbeza antara pelayar yang berbeza dan perlu disesuaikan.

Untuk pustaka FileSaver, ia tidak serasi dalam semua penyemak imbas, seperti Apple Safari, yang mana kernel WebKit perlu digunakan dan nama fail perlu ditukar kepada pengekodan ASCII. Kod sampel adalah seperti berikut:

function onExportClick(){
    var text     = fileText
    var filename = 'test.txt'.replace(/[^a-zd_]/gi,'_').toLowerCase();
    var blob = new Blob([text], {type: 'text/plain'});
    if(window.navigator.msSaveOrOpenBlob){
        window.navigator.msSaveBlob(blob, filename);
    }else{
        var a = document.createElement('a');
        var url = URL.createObjectURL(blob);

        if(a.download != undefined){
            a.href     = url;
            a.download = filename;
            a.click();
        }else{
            window.location.href = url;
        }

        URL.revokeObjectURL(url);
    }
}

Untuk pustaka JSZip, ia perlu mempertimbangkan jenis dan pengekodan fail. Untuk jenis fail yang berbeza, pengekodan yang berbeza perlu digunakan. Juga, ambil perhatian bahawa sesetengah penyemak imbas mungkin menambah fail atau folder tambahan.

Disebabkan banyak isu keserasian penyemak imbas, terdapat banyak situasi yang perlu dipertimbangkan semasa menggunakan perpustakaan ini, terutamanya isu seperti nama fail dan jenis fail.

Ringkasan:
Artikel ini memperkenalkan cara menggunakan JavaScript untuk merealisasikan fungsi menyimpan folder. Semasa proses pelaksanaan, perpustakaan JSZip dan pustaka FileSaver perlu digunakan. Disebabkan isu keserasian penyemak imbas, perhatian perlu diberikan kepada penyesuaian antara penyemak imbas yang berbeza.

Atas ialah kandungan terperinci Javascript melaksanakan penyimpanan folder. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!