JavaScript如何用文件保存

本文講解"JavaScript怎么用文件保存"，希望能夠解決相關(guān)問題。

概述

保存文件是指將數(shù)據(jù)存儲(chǔ)在本地計(jì)算機(jī)的硬盤驅(qū)動(dòng)器中。這可以通過使用 JavaScript 中的文件保存機(jī)制來實(shí)現(xiàn)。當(dāng)用戶單擊保存按鈕時(shí)，在本地計(jì)算機(jī)上創(chuàng)建一個(gè)新文件，其中包含用戶輸入或應(yīng)用程序中的數(shù)據(jù)。它通常用于視頻播放器、文檔編輯器、圖像編輯器等 Web 應(yīng)用程序中，以便用戶下載和保存所編輯的文件。

使用 FileSaver.js 庫(kù)保存文件

FileSaver.js 是一個(gè)流行的第三方 JavaScript 庫(kù)，可用于保存文件。它是使用 JavaScript 中的 Blob 對(duì)象創(chuàng)建包含數(shù)據(jù)的文件，并通過修改 window.location 對(duì)象的 href 屬性將其保存到用戶的本地計(jì)算機(jī)中。

要使用 FileSaver.js 庫(kù)，您需要做以下兩個(gè)步驟：

步驟1 - 引入庫(kù)

下面代碼演示如何使用 JavaScript 文件 引入 FileSaver.js 庫(kù)：

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

步驟2 - 使用庫(kù)中的 saveAs() 函數(shù)保存文件

下面代碼演示如何使用 saveAs() 函數(shù)保存文件：

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

在這個(gè)例子中，我們創(chuàng)建了一個(gè)名為“hello.txt”的文件，并將字符串“Hello，World！”寫入其中。然后，我們使用 saveAs() 函數(shù)將 Blob 對(duì)象和文件名傳遞給它。文件保存過程中，用戶將會(huì)看到一個(gè)文件保存對(duì)話框，提示用戶指定要保存文件的位置和文件名。

使用 FileReader 和 Blob 對(duì)象保存文件

FileReader 和 Blob 對(duì)象是一些原生 JavaScript API。Blob 對(duì)象表示二進(jìn)制數(shù)據(jù)，并可用于創(chuàng)建包含數(shù)據(jù)的文件。FileReader 可以讀取該文件并返回一個(gè)字符串變量，然后將該變量寫入到用戶的本地計(jì)算機(jī)。

步驟1 - 創(chuàng)建 Blob 對(duì)象并保存它

下面代碼演示如何創(chuàng)建 Blob 對(duì)象并將其保存到本地文件中：

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();
}

在這里，我們創(chuàng)建了一個(gè)名為“hello.txt”的文件，并將字符串“Hello，World！”寫入其中。我們使用 window.URL.createObjectURL() 方法創(chuàng)建了一個(gè)包含 Blob 對(duì)象的 URL。然后，我們創(chuàng)建了一個(gè)鏈接并下載該文件。

步驟 2 - 將數(shù)據(jù)寫入文件

下面代碼演示如何將輸入數(shù)據(jù)寫入到 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);
}

在這里，我們創(chuàng)建了一個(gè)名為“hello.txt”的文件，并將字符串“Hello，World！”寫入其中。我們使用 FileReader 實(shí)例 readAsText() 方法讀取文件中的文本，并在成功時(shí)返回該文本。通過這個(gè)文本，我們創(chuàng)造了一個(gè)新鏈接，并下載該文件。

關(guān)于 "JavaScript怎么用文件保存" 就介紹到此。希望多多支持碩編程。