JavaScript怎麼用檔案來保存

JavaScript 是一種在 web 開發中廣泛應用的程式語言，可透過瀏覽器與使用者互動。在許多web 應用程式中，使用者需要將一些資料儲存到本機電腦中，以便在將來的會話中再次使用。 JavaScript 透過使用一種稱為檔案保存的機制來實現這個功能。在本文中，我們將學習如何使用 JavaScript 在本機電腦上儲存檔案。

概述

保存檔案是指將資料儲存在本機電腦的硬碟中。這可以透過使用 JavaScript 中的檔案保存機制來實現。當使用者點擊儲存按鈕時，在本機電腦上建立一個新文件，其中包含使用者輸入或應用程式中的資料。它通常用於影片播放器、文件編輯器、圖像編輯器等 Web 應用程式中，以便使用者下載和保存所編輯的文件。

使用 FileSaver.js 函式庫保存檔案

FileSaver.js 是一個流行的第三方 JavaScript 函式庫，可用來儲存檔案。它是使用 JavaScript 中的 Blob 物件建立包含資料的文件，並透過修改 window.location 物件的 href 屬性將其儲存到使用者的本機電腦中。

要使用FileSaver.js 庫，您需要做以下兩個步驟：

步驟1 - 引入庫

#下面程式碼示範如何使用JavaScript 檔案引入FileSaver.js 庫：

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

步驟2 - 使用庫中的saveAs() 函數儲存檔案

#下面程式碼示範如何使用saveAs() 函式儲存檔案：

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

在這個範例中，我們創建了一個名為“hello.txt”的文件，並將字串“Hello，World！”寫入其中。然後，我們使用 saveAs() 函數將 Blob 物件和檔案名稱傳遞給它。在檔案儲存過程中，使用者將會看到一個檔案儲存對話框，提示使用者指定要儲存檔案的位置和檔案名稱。

使用 FileReader 和 Blob 物件來保存檔案

FileReader 和 Blob 物件是一些原生 JavaScript API。 Blob 物件表示二進位數據，並可用於建立包含資料的檔案。 FileReader 可以讀取該檔案並傳回字串變量，然後將該變數寫入到使用者的本機電腦。

步驟1 - 建立Blob 物件並儲存它

#下面程式碼示範如何建立Blob 物件並將其儲存到本機檔案：

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

在這裡，我們建立了一個名為“hello.txt”的文件，並將字串“Hello，World！”寫入其中。我們使用 window.URL.createObjectURL() 方法建立了一個包含 Blob 物件的 URL。然後，我們創建了一個連結並下載該文件。

步驟2 - 將資料寫入檔案

下面程式碼示範如何將輸入資料寫入到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);
}

在這裡，我們建立了一個名為“ hello.txt」的文件，並將字串「Hello，World！」寫入其中。我們使用 FileReader 實例 readAsText() 方法讀取文件中的文本，並在成功時返回該文本。透過這個文本，我們創造了一個新鏈接，並下載該文件。

結論

在本文中，我們討論如何透過 JavaScript 在本機電腦上儲存檔案。 JavaScript 檔案保存機制可以在許多 Web 應用程式中使用，如影片播放器、文件編輯器、圖像編輯器等。我們示範了使用 FileSaver.js 函式庫和原生 JavaScript API 的兩種不同的實作方式。這些實作方法都是易於使用的，並可為 web 應用程式提供更好的使用者體驗。

以上是JavaScript怎麼用檔案來保存的詳細內容。更多資訊請關注PHP中文網其他相關文章！