Jika Anda telah mengikuti langkah yang sama di komputer Anda, Anda akan melihat hasil yang sama seperti contoh. http. // localhost. 8080
Buat File
Modul File System memiliki metode untuk membuat file baru
- fs.appendFile()
- fs.open()_
- fs.writeFile()_
Metode fs.appendFile()_ menambahkan konten tertentu ke file. Jika file tidak ada, file akan dibuat
Contoh
Buat file baru menggunakan metode appendFile()
var fs = membutuhkan('fs');
fs. appendFile('mynewfile1. txt', 'Halo konten. ', fungsi (salah) {
jika (err) lempar err;
menghibur. log('Disimpan. ');
});
Metode fs.open() mengambil "flag" sebagai argumen kedua, jika flag adalah "w" untuk "menulis", file yang ditentukan dibuka untuk ditulis. Jika file tidak ada, file kosong akan dibuat
Contoh
Buat file baru yang kosong menggunakan metode open()
var fs = membutuhkan('fs');
fs. buka('mynewfile2. txt', 'w', function (err, file) {
jika (err) lempar err;
menghibur. log('Disimpan. ');
});
Metode fs.writeFile() menggantikan file dan konten yang ditentukan jika ada. Jika file tidak ada, file baru yang berisi konten tertentu akan dibuat
Objek seperti Array, memiliki ArrayBuffer, TypedArray, DataView, Blob, string, atau campuran dari salah satu elemen tersebut, yang akan diletakkan di dalam File. Perhatikan bahwa string di sini dikodekan sebagai UTF-8, tidak seperti string UTF-16 JavaScript biasa
String yang mewakili nama file atau jalur ke file
const file = new File(["foo"], "foo.txt", { type: "text/plain", }); 2 OpsionalObjek opsi yang berisi atribut opsional untuk file. Pilihan yang tersedia adalah sebagai berikut
const file = new File(["foo"], "foo.txt", { type: "text/plain", }); _3Sebuah string yang mewakili tipe MIME dari konten yang akan dimasukkan ke dalam file. Default ke nilai const file = new File(["foo"], "foo.txt", { type: "text/plain", }); 4
const file = new File(["foo"], "foo.txt", { type: "text/plain", }); 5Angka yang mewakili jumlah milidetik antara zaman waktu Unix dan saat file terakhir diubah. Default ke nilai const file = new File(["foo"], "foo.txt", { type: "text/plain", }); 6
Cara yang umum adalah membuat file di backend. Kemudian, terjadi pengalihan ke file di browser, yang mengarah ke pengunduhan. Tetapi ada cara lain. File dapat dibuat dan diunduh di browser. Kami bahkan tidak memerlukan pustaka JavaScript untuk mewujudkannya. Inilah cara kerjanya
Menghasilkan file dengan JavaScriptUntuk bekerja dengan file, ada API di browser. Ini disebut File API dan didukung secara luas. Untuk membuat file dengannya, kami membuat instance baru dari kelas File. Semudah kode berikut
const file = new File(['foo'], 'note.txt', {type: 'text/plain',
})_
Parameter yang diperlukan adalah sebagai berikut
- Pertama, array data — ini bisa berupa Blob, ArrayBuffer, atau seperti dalam kasus kita, string yang kompatibel
- Kedua, nama file, termasuk akhiran
- Sebagai opsi, kami meneruskan jenis file yang sebenarnya
Untuk menghasilkan file, file dengan data tipe text/plain (teks, HTML, CSV, dll. ), ini yang kita butuhkan. Menghasilkan lebih banyak jenis file abstrak membutuhkan bekerja dengan blob atau buffer
Untuk saat ini, ini sudah cukup. Kami membuat file txt baru di browser. Jadi apa selanjutnya?
Mengunduh fileUntuk memeriksa apakah pembuatan file berhasil, kita perlu mengaksesnya. Mengaksesnya memerlukan pengunduhan. Untuk mengunduh file, kami menggunakan trik kecil
Kami membuat tautan yang berisi referensi ke file kami. Kemudian, kami membiarkan JavaScript mengklik tautannya, sehingga file tersebut diunduh. Tapi dari mana kita mendapatkan URL tempat file kita berada di browser?
Untuk menerima URL file kami, kami menggunakan URL.createObjectURL() yang menerima objek file kami sebagai parameter. Kemudian, tentukan nama file yang disimpan secara default dengan menyetel atribut download dari tautan
Terakhir, kami memasang tautan di DOM, mengekliknya secara artifisial, dan menghapusnya dari DOM. Ini kode lengkapnya