Dapatkah Anda membuat file dengan javascript?

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. ');
});

Jalankan contoh »

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. ');
});

Jalankan contoh »

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

const file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});
_1

String yang mewakili nama file atau jalur ke file

const file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});
2 Opsional

Objek opsi yang berisi atribut opsional untuk file. Pilihan yang tersedia adalah sebagai berikut

const file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});
_3

Sebuah 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",
});
5

Angka 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 JavaScript

Untuk 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 file

Untuk 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

Bagaimana cara membuat dan menulis file dalam JavaScript?

Cara Membuat dan Menyimpan file teks dalam JavaScript .
Fungsi JavaScript yang diaktifkan pada peristiwa klik tombol
Buat konstruktor Blob, berikan data di dalamnya untuk menyimpan dan menyebutkan jenis datanya
Dan terakhir, panggil saveAs(Blob object, "your-file-name. teks") dari FileSaver. perpustakaan js

Bagaimana cara membuat file eksternal dalam JavaScript?

Buat file JavaScript eksternal dengan ekstensi. js . Setelah dibuat, tambahkan ke file HTML di tag skrip. Atribut src digunakan untuk memasukkan file JavaScript eksternal itu.