資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 JavaScript 中建立和儲存文字檔案？
在本教程中，我們將學習如何在 JavaScript 中建立和儲存文字檔案。有時，開發人員需要獲取使用者的文字或內容，並允許使用者將內容儲存在文字檔案中，並允許檔案下載到本地計算機。
許多 JavaScript 庫可用於實現我們的目標，但我們在這個教程中使用了兩個最好的庫來建立和儲存文字檔案。
使用自定義文字建立文字檔案並將其儲存到本地計算機
我們將使用普通的 JavaScript 操作在使用者的計算機上建立和儲存文字檔案。使用者可以使用 HTML <a> 標籤 從自定義內容建立文字檔案並儲存它。
開發人員應遵循以下語法從文字輸入建立文字檔案並儲存它。
語法
// Create element with <a> tag
const link = document.createElement("a");
// Create a blog object with the file content which you want to add to the file
const file = new Blob([content], { type: 'text/plain' });
// Add file content in the object URL
link.href = URL.createObjectURL(file);
// Add file name
link.download = "sample.txt";
// Add click event to <a> tag to save file.
link.click();
URL.revokeObjectURL(link.href);
在上述語法中，我們從使用者那裡獲取了內容，將其轉換為 Blob 物件，然後將其儲存到文字檔案中。
演算法
使用者應遵循以下步驟以瞭解上述語法。
步驟 1 − 建立 HTML <a> 元素。
步驟 2 − 獲取要新增到文字檔案的內容。
步驟 3 − 建立內容的 Blob 物件。
步驟 4 − 在 <a> 標籤的 href 屬性中，新增 Blob 物件 URL。
步驟 5 − 將預設檔名作為 <a> 標籤的“download”屬性的值。
步驟 6 − 在 <a> 標籤上呼叫 click() 事件以將檔案儲存到本地計算機。
示例
我們在下面的示例中按照語法和演算法編寫了程式碼。我們建立了 HTML <textfield>。使用者可以輸入他們想要新增到檔案中的內容，然後單擊“儲存檔案”按鈕以將文字檔案儲存到計算機上。
當用戶單擊“儲存檔案”按鈕時，它將呼叫“downloadFile()”函式，我們在其中添加了建立和儲存文字檔案的程式碼。
<html> <body> <h2> Create a text file and save it to a local computer using JavaScript. </h2> <p> Enter the file content:- </p> <textarea> </textarea> <br/> <button onclick = "downloadFile()"> save File </button> <script> const downloadFile = () => { const link = document.createElement("a"); const content = document.querySelector("textarea").value; const file = new Blob([content], { type: 'text/plain' }); link.href = URL.createObjectURL(file); link.download = "sample.txt"; link.click(); URL.revokeObjectURL(link.href); }; </script> </body> </html>
使用 FileSaver JavaScript 庫建立和儲存文字檔案
“FileSaver”是我們可以在原生 JavaScript 中用來建立文字檔案的 JavaScript 庫。使用者可以使用庫的 CDN 與 HTML 和 JavaScript 一起使用它。
使用者應使用以下語法使用 FileSaver 庫。
語法
// Create blob object with file content
var blob = new Blob(["This is a sample file content."], {
type: "text/plain;charset=utf-8",
});
// Create and save the file using the FileWriter library
saveAs(Content, fileName);
在上述語法中，我們使用了一些文字建立了“text”型別的 Blob 物件。此外，我們使用了 FileWriter 庫的“saveAs()”函式來建立和儲存文字檔案。
引數
“saveAs”函式接受兩個引數。
內容 − 需要儲存在檔案中的內容。
檔名 − 使用者下載時的預設檔名。
示例
我們在下面程式碼的 <head> 部分添加了“FileWriter”庫的 CDN。當用戶單擊“建立文字檔案”按鈕時，它將在 JavaScript 中呼叫“CreateTextFile()”函式，該函式建立句子“這是一個簡單的檔案內容”的 Blob 物件並執行“saveAs()”函式以儲存文字檔案。
<html> <head> <script src = "https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js" integrity="sha512-csNcFYJniKjJxRWRV1R7fvnXrycHP6qDR21mgz1ZP55xY5d+aHLfo9/FcGDQLfn2IfngbAHd8LdfsagcCqgTcQ==" crossorigin = "anonymous" referrerpolicy = "no-referrer"> </script> </head> <body> <h2>Create text file and save it to local computer using <i> FileSaver </i> JavaScript Library.</h2> <button type = "button" onclick = "CreateTextFile();">Create Text File</button> <script> function CreateTextFile() { var blob = new Blob(["This is a sample file content."], { type: "text/plain;charset=utf-8", }); saveAs(blob, "download.txt"); } </script> </body> </html>
使用 FileSaver JavaScript 庫將影像內容儲存到文字檔案中
在本節中，我們使用了相同的庫“FileSaver”，但不是將普通文字儲存到檔案中，而是將影像轉換為 Blob 物件後將其轉換為字串。
使用者可以按照以下語法將影像儲存為文字檔案格式並儲存。
語法
// Access the file input by Id
var element = document.getElementById("uploadedImage");
// Add onchange event to file input
element.onchange = function (event) {
// Convert image content to text
var blob = new Blob[event.target.files[0]], {
type: "text/plain;charset=utf-8",
});
// Create text file using image’s content and save it
saveAs(blob, "download.txt");
};
在上述語法中，我們獲取使用者上傳到 HTML <input> 中的檔案，並將其內容轉換為 Blob 物件。之後，我們使用 Blob 物件建立文字檔案並將檔案儲存到本地計算機。
示例
我們在下面的示例中使用了“FileSaver”JavaScript 庫，如上述語法所示。我們建立了檔案輸入欄位，只允許使用者上傳影像檔案。
在 JavaScript 中，我們在檔案輸入中添加了事件偵聽器，當用戶上傳檔案時，它將使用上傳的影像檔案建立文字檔案並將其儲存到使用者的計算機。
<html> <head> <script src = "https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js" integrity = "sha512-csNcFYJniKjJxRWRV1R7fvnXrycHP6qDR21mgz1ZP55xY5d+aHLfo9/FcGDQLfn2IfngbAHd8LdfsagcCqgTcQ==" crossorigin = "anonymous" referrerpolicy = "no-referrer"> </script> </head> <body> <h2>Upload image and add its content to text file and save it to computerusing <i> FileSaver </i> JavaScript Library.</h2> <input type = "file" id = "uploadedImage" accept = "image/png, image/gif, image/jpeg"/> <script> var element = document.getElementById("uploadedImage"); element.onchange = function (event) { var blob = new Blob[event.target.files[0]], { type: "text/plain;charset=utf-8", }); saveAs(blob, "download.txt"); }; </script> </body> </html>
103K+ 瀏覽量
