Bagaimana untuk menyimpan fail menggunakan JavaScript

JavaScript ialah bahasa pengaturcaraan yang digunakan secara meluas dalam pembangunan web untuk berinteraksi dengan pengguna melalui penyemak imbas. Dalam banyak aplikasi web, pengguna perlu menyimpan beberapa data ke komputer setempat mereka supaya ia boleh digunakan semula dalam sesi akan datang. JavaScript melakukan ini dengan menggunakan mekanisme yang dipanggil penjimatan fail. Dalam artikel ini, kami akan mempelajari cara menyimpan fail pada komputer setempat anda menggunakan JavaScript.

Ikhtisar

Menyimpan fail bermakna menyimpan data pada pemacu keras komputer setempat anda. Ini boleh dicapai dengan menggunakan mekanisme penjimatan fail dalam JavaScript. Apabila pengguna mengklik butang Simpan, fail baharu dicipta pada komputer tempatan yang mengandungi input pengguna atau data daripada aplikasi. Ia biasanya digunakan dalam aplikasi web seperti pemain video, penyunting dokumen, penyunting imej, dll. untuk membolehkan pengguna memuat turun dan menyimpan fail yang diedit.

Menyimpan fail menggunakan pustaka FileSaver.js

FileSaver.js ialah pustaka JavaScript pihak ketiga yang popular yang boleh digunakan untuk menyimpan fail. Ia menggunakan objek Blob dalam JavaScript untuk mencipta fail yang mengandungi data dan menyimpannya ke komputer setempat pengguna dengan mengubah suai sifat href bagi objek window.location.

Untuk menggunakan pustaka FileSaver.js, anda perlu melakukan dua langkah berikut:

Langkah 1 - Import pustaka

Kod berikut menunjukkan cara menggunakan JavaScript fail untuk mengimport pustaka FileSaver.js :

<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>

Langkah 2 - Simpan fail menggunakan fungsi saveAs() daripada pustaka

Kod berikut menunjukkan cara menyimpan fail menggunakan saveAs( ) fungsi:

function saveFile() {
  var data = "Hello, World!";
  var filename = "hello.txt";
  var file = new Blob([data], {type: 'text/plain'});
  saveAs(file, filename);
}

Dalam contoh ini, kami mencipta fail yang dipanggil "hello.txt" dan menulis rentetan "Hello, World!" Kami kemudian menggunakan fungsi saveAs() untuk menghantar objek Blob dan nama fail. Semasa proses penyimpanan fail, pengguna akan melihat kotak dialog penyimpanan fail yang menggesa pengguna untuk menentukan lokasi dan nama fail fail yang hendak disimpan.

Menyimpan fail menggunakan FileReader dan objek Blob

FileReader dan objek Blob ialah API JavaScript asli. Objek gumpalan mewakili data binari dan boleh digunakan untuk mencipta fail yang mengandungi data. FileReader boleh membaca fail dan mengembalikan pembolehubah rentetan, yang kemudiannya boleh ditulis ke komputer tempatan pengguna.

Langkah 1 - Buat objek Blob dan simpan

Kod berikut menunjukkan cara mencipta objek Blob dan simpan ke fail setempat:

function saveFile() {
  var data = "Hello, World!";
  var filename = "hello.txt";
  var file = new Blob([data], {type: 'text/plain'});
  var a = document.createElement('a');
  a.href = window.URL.createObjectURL(file);
  a.download = filename;
  a.click();
}

Di sini, kami cipta fail yang dipanggil "hello.txt" dan menulis rentetan "Hello, World!" Kami mencipta URL yang mengandungi objek Blob menggunakan kaedah window.URL.createObjectURL(). Kami kemudian membuat pautan dan memuat turun fail.

Langkah 2 - Tulis data ke fail

Kod berikut menunjukkan cara menulis data input ke dalam FileReader:

function saveFile() {
  var data = "Hello, World!";
  var filename = "hello.txt";
  var file = new Blob([data], {type: 'text/plain'});

  var reader = new FileReader();
  reader.onload = function(event) {
    var text = event.target.result;
    var a = document.createElement('a');
    a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(text);
    a.download = filename;
    a.click();
  };
  reader.readAsText(file);
}

Di sini, kami mencipta fail bernama " hello.txt" fail dan tulis rentetan "Hello, World!" Kami menggunakan kaedah FileReader instance readAsText() untuk membaca teks daripada fail dan mengembalikan teks tersebut pada kejayaan. Dengan teks ini, kami mencipta pautan baharu dan memuat turun fail.

Kesimpulan

Dalam artikel ini, kami membincangkan cara menyimpan fail pada komputer tempatan melalui JavaScript. Mekanisme penjimatan fail JavaScript boleh digunakan dalam banyak aplikasi web seperti pemain video, penyunting dokumen, penyunting imej, dsb. Kami menunjukkan dua pelaksanaan berbeza menggunakan pustaka FileSaver.js dan API JavaScript asli. Pelaksanaan ini mudah digunakan dan memberikan pengalaman pengguna yang lebih baik untuk aplikasi web.

Atas ialah kandungan terperinci Bagaimana untuk menyimpan fail menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!