Bisakah kita membuat file dalam javascript?

JavaScript adalah salah satu bahasa pemrograman paling populer, terutama karena ia menangani front-end situs web saat berjalan di dalam browser. Dengan kemajuan dalam standar web, kami telah menggunakannya untuk menyelesaikan lebih banyak tugas yang sebelumnya sangat sulit atau tidak mungkin dilakukan hanya dengan JavaScript

Dalam tutorial ini, Anda akan belajar cara membuat dan menyimpan file dengan JavaScript. Kami akan membahas tiga teknik berbeda yang dapat Anda gunakan untuk melakukannya

Menggunakan URL Data untuk Menyimpan File

Cara termudah untuk menyimpan file adalah dengan menggunakan URL Data yang menyertakan semua informasi yang relevan. URL data ini adalah URL khusus yang diawali dengan skema

data:[<mediatype>][;base64],<data>

1

data:[<mediatype>][;base64],<data>

Token

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

Kita dapat menggunakan atribut

data:[<mediatype>][;base64],<data>

1

<a download="monty.txt" href="data:text/plain;charset=utf-8,My name is Monty.">Download Text File with Name</a>

JavaScript bisa sangat berguna saat Anda ingin menjadikan semuanya dinamis. Ini sebuah contoh

1

const link = document.querySelector('a.dynamic');

2

3

let name = 'Monty';

4

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

Kita mulai dengan memilih tautan kita menggunakan metode

data:[<mediatype>][;base64],<data>

Kami membuat URL data kami dengan menggabungkan metadata dengan konten aktual yang disandikan menggunakan fungsi

data:[<mediatype>][;base64],<data>

Menggunakan Gumpalan untuk Membuat dan Menyimpan File

Gumpalan adalah objek mirip file dalam JavaScript yang berisi data mentah. Data mentah ini dapat dibaca sebagai teks atau sebagai data biner. Dalam tutorial ini, kita akan menggunakan blob untuk membuat dan menyimpan file dalam JavaScript

Kita dapat membuat gumpalan kita sendiri menggunakan konstruktor

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

Kita dapat memodifikasi contoh terakhir di bagian sebelumnya untuk menggunakan blob dengan kode JavaScript berikut

1

1

2

3

let name = 'Monty';

4

data:[<mediatype>][;base64],<data>

Kami membuat

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

Mari selangkah lebih maju dan buat blob tempat teks diperoleh secara dinamis dari elemen

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

1

1

2

let name = 'Monty';

3

4

1

data:[<mediatype>][;base64],<data>

1

data:[<mediatype>][;base64],<data>

1

data:[<mediatype>][;base64],<data>

const link = document.querySelector('a.dynamic');

data:[<mediatype>][;base64],<data>

const link = document.querySelector('a.dynamic');

data:[<mediatype>][;base64],<data>

<a download="monty.txt" href="data:text/plain;charset=utf-8,My name is Monty.">Download Text File with Name</a>

const link = document.querySelector('a.dynamic');

<a download="monty.txt" href="data:text/plain;charset=utf-8,My name is Monty.">Download Text File with Name</a>

const link = document.querySelector('a.dynamic');

const link = document.querySelector('a.dynamic');

2

2

1

2

2

2

2

2

Kami mulai dengan mendapatkan referensi ke tombol kami dan kemudian mendengarkan acara kliknya. Setelah tombol diklik, kami mendapatkan nilai elemen

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

Anda dapat mencobanya di demo CodePen berikut. Sebagai latihan, coba ubah kode sehingga menyimpan file dengan nama yang dimasukkan oleh pengguna alih-alih sesuatu yang statis

Cara Menyimpan File di Folder Tertentu Menggunakan JavaScript

Mari kita mulai dengan menjawab pertanyaan ini terlebih dahulu. Singkatnya, Anda tidak dapat secara sembarangan memilih direktori tempat file disimpan dalam JavaScript. Hanya pengguna yang memiliki kendali atas lokasi penyimpanan file

Alasan pengembang web tidak diizinkan untuk memiliki kendali penuh atas lokasi penyimpanan file oleh browser berkaitan dengan keamanan. Internet akan jauh lebih tidak aman jika setiap situs web memiliki akses ke sistem file di perangkat Anda. Mereka dapat dengan mudah menyuntikkan kode berbahaya ke dalam sistem Anda atau melihat informasi pribadi

Sebelumnya, tidak mungkin untuk menyimpan file di mana pun kecuali folder unduhan default, yang ditentukan oleh pengaturan browser dan bukan situs web individu. Namun, memungkinkan pengembang untuk menyarankan di mana file dapat disimpan setelah mereka diberi akses oleh pengguna. Perlu diingat bahwa dukungan browser yang lebih luas saat ini kurang untuk API, dan browser yang mendukungnya hanya melakukannya sebagian

Mari ubah contoh terakhir kita dari bagian sebelumnya untuk membuat dan menyimpan file dalam JavaScript dengan File System Access API

1

1

2

let name = 'Monty';

3

4

3

data:[<mediatype>][;base64],<data>

1

data:[<mediatype>][;base64],<data>

const link = document.querySelector('a.dynamic');

data:[<mediatype>][;base64],<data>

const link = document.querySelector('a.dynamic');

data:[<mediatype>][;base64],<data>

1

data:[<mediatype>][;base64],<data>

let name = 'Monty';

<a download="monty.txt" href="data:text/plain;charset=utf-8,My name is Monty.">Download Text File with Name</a>

let name = 'Monty';

<a download="monty.txt" href="data:text/plain;charset=utf-8,My name is Monty.">Download Text File with Name</a>

let name = 'Monty';

const link = document.querySelector('a.dynamic');

4

2

4

2

4

2

4

2

4

4

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

2

Seperti biasa, kita mulai dengan membuat gumpalan

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

Metode

data:[<mediatype>][;base64],<data>

Coba tulis sesuatu di

data:[<mediatype>][;base64],<data>

Pikiran Akhir

Dalam tutorial ini, kita mempelajari tiga teknik berbeda untuk membuat dan menyimpan file dalam JavaScript. Dua teknik pertama mengharuskan kita membuat tag jangkar dan menetapkan nilai ke atribut

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

Bisakah JavaScript membuat file?

Bagaimana cara membuat file baru di JavaScript?

Bagaimana cara membuat dan mengunduh file dalam JavaScript?