JavaScript實現文本轉換為文件示例詳解

Posted on by

✨ 項目基本結構

目錄結構如下：

├── css
│   └── style.css
└── index.html

本節教程我們通過文本轉換為文件的案例（如下圖所示）帶大傢去認識一下 JavaScript 吧！

知識點

  • textarea 標簽
  • placeholder 屬性
  • calc 函數
  • js 中三種引入方式
  • js 中三種聲明方法

首先還是跟往常一樣新建一個 HTML 頁面，在文件中輸入英文 !，然後按 tab 鍵生成模板。

在文件中添加 HTML 和 CSS 代碼創建這個項目的基礎結構。

<div id="container"></div>

* {
  box-sizing: border-box;
}
body {
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(https://labfile.oss.aliyuncs.com/courses/8605/bg-451838.jpeg);
  background-size: 100% 100%;
  font-family: "Kanit", Verdana, Arial, sans-serif;
}
#container {
  width: 430px;
  padding: 40px 20px;
  background: white;
}

效果如下所示：

在上面代碼中，我們添加瞭一張背景圖片，並且在這裡創建瞭一個寬度為 430px，背景顏色為白色的容器。

添加標題

基本結構有瞭，現在，我們在容器（#container）的頭部添加一個 h1 標題。

<h1>將文本保存到文件中</h1>

這裡我們設置標題的字體大小為 30px，顏色為藍色。

h1 {
  color: #0773d7;
  font-size: 30px;
  width: 100%;
  margin-top: -15px;
  margin-bottom: 30px;
  text-align: center;
  text-transform: uppercase;
}

效果如下所示：

創建一個多行文本框

現在我們在標題下面創建一個文本框用來輸入（待轉換的）文本內容。這個文本框是用 HTML 中的 textarea 標簽來創建的。

<textarea placeholder="在此輸入文字..." id="text"></textarea>

然後給文本框添加一些樣式。

#text {
  display: block;
  width: 100%;
  background-color: transparent;
  color: #021652;
  border: 2px solid #3ba9f4;
  border-radius: 2px;
  resize: none;
  margin-bottom: 35px;
  height: 200px;
  padding: 10px;
  font-size: 20px;
}

效果如下所示：

屬性說明如下：

textarea 標簽定義多行的文本輸入控件，文本區中可容納一段相當長的、不限格式的文本。

placeholder 屬性規定描述文本區域預期值的簡短提示，提示會在文本區域為空時顯示。

創建一個單行文本框

接下來我們創建一個單行文本框用來輸入文件名。該框使用 input 標簽來創建。

<input id="filename" placeholder="起一個文件名..." />

然後給輸入框添加一些樣式。

#filename {
  width: calc(100% - 200px);
  border: 2px solid #3ba9f4;
  border-radius: 2px;
  background-color: transparent;
  color: #052a53;
  padding: 0 10px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  margin-right: 20px;
}

效果如下所示：

屬性說明如下：

  • calc() 函數用於動態計算長度值，需要註意的是運算符前後都需要保留一個空格，可參考 MDN calc()。

保存文件的按鈕

現在我們需要創建一個下載按鈕。單擊此按鈕將下載轉換後的文本文件。

<button id="download">下載文件</button>

我們給按鈕設置一下樣式，盒子的寬度為 174 像素，高度為 50 像素，背景顏色使用瞭藍色。

#download {
  background-color: #3ba9f4;
  color: #fff;
  font-size: 20px;
  height: 50px;
  border: none;
  border-radius: 2px;
  width: 174px;
  cursor: pointer;
}

效果如下所示：

頁面的效果現在已經完成瞭，但是現在點擊按鈕，還不能下載文件。

JavaScript 該出場瞭。

使用 JavaScript 將文本保存到文件

在實驗介紹中已經為大傢介紹過瞭 JavaScript，這裡給大傢說一說它的引入方式。

如何在 HTML 頁面中引入 JavaScript？

與 CSS 類似，HTML 也可以使用三種方式引入 JavaScript。

  • 內聯：在標簽的事件屬性中添加 js 代碼，當事件觸發時執行 js 代碼。
  • 內部：在 HTML 頁面的任意位置添加 script 標簽，標簽體內寫 js 代碼，當頁面加載時執行。
  • 外部：在單獨的 js 文件中寫 js 代碼，在 HTML 頁面中通過 script 標簽的 src 屬性引入，頁面加載時執行。

這裡需要同學們註意一下，CSS 和 JS 的外部引入之間的區別，CSS 是使用 link 標簽的 href 屬性來引入的，而 JS 是通過 script 標簽的 src 屬性引入的。

我們來看一看下面的例子：

<!-- 內聯引入方式 -->
<input type="button" value="按鈕" onclick="alert('內聯引入成功!')" />
<!-- 內部引入方式 -->
<script type="text/javascript">
  alert("內部引入成功!");
</script>
<!-- 引入外部js文件 -->
<script src="my.js" type="text/javascript" charset="utf-8"></script>

my.js 中的內容：

alert("外部引入成功!");

三種方式均可成功輸出內容，效果如下（點擊右下方 Go Live 啟動 8080 端口，打開 Web 服務）：

在上面例子中，onclick 是綁定的點擊事件，當點擊這個元素會被觸發；

alert 是彈出一個警告框。

接下來我們使用內部引入的方式添加 JS 代碼，用來實現文件下載的功能。

<script type="text/javascript">
// js 中方法聲明：function 方法名(參數列表){方法體}
function downloadFile(filename, content) {
  // 它適用於所有支持 HTML5 的瀏覽器，因為它使用瞭 <a> 元素的下載屬性：
  const element = document.createElement("a");
  // Blob 是一種可以存儲二進制數據的數據類型
  // 根據要保存的文件，它可以有不同的值
  const blob = new Blob([content], { type: "plain/text" });
  // createObjectURL() 靜態方法創建一個 DOMString，其中包含一個 URL，該 URL 表示參數中給定的對象。
  const fileUrl = URL.createObjectURL(blob);
  // setAttribute() 設置指定元素的屬性值。
  element.setAttribute("href", fileUrl); // 文件位置
  element.setAttribute("download", filename); // 文件名
  element.style.display = "none";
  // 使用 appendChild() 方法將一個節點附加到指定父節點的子節點列表的末尾處
  document.body.appendChild(element);
  element.click();
  // Node 接口的 removeChild() 方法從 DOM 中移除一個子節點並返回移除的節點
  document.body.removeChild(element);
}
window.onload = () => {
  document.getElementById("download").addEventListener("click", (e) => {
    // 文件名輸入框的值
    const filename = document.getElementById("filename").value;
    // 文本中輸入的值
    const content = document.getElementById("text").value;
    // &&（邏輯與）運算符指示兩個操作數是否為真。 如果兩個操作數都具有非零值，則結果的值為 1。否則，結果的值為 0。
    if (filename && content) {
      downloadFile(filename, content);
    }
  });
};
</script>

最終效果如下所示：

接下來，我們對上面的 JS 代碼做一下說明～

  • function downloadFile(filename, content) {} 定義瞭一個名為 downloadFile 的函數，該函數可以傳入兩個參數 filename（保存文本的文件名） 和 content（文本內容）。
  • const 是定義常量的關鍵字，還有兩種定義變量的關鍵字 var、let。
  • document 是 JS 的 DOM 操作，DOM 的全稱為 Document Object Model，就是對 HTML 文檔中的元素進行操作，比如修改、刪除、增加。那麼 document.createElement("a") 就是在 HTML 文檔中創建瞭一個 <a> 元素。
  • new Blob() 是實例化瞭一個 Blob 對象，它表示一個不可變、原始數據的類文件對象，它的數據可以按文本或二進制的格式進行讀取，也可以轉換成 ReadableStream 來用於數據操作。其中：
    • [content] 是多行輸入框中的文本內容。

{ type: "plain/text" } 是 MIME 類型，表示文本的類型為數組或者字符串。

例如：

var blob = new Blob(["<html>…</html>"], { type: "text/html" });
  • URL.createObjectURL() 表示靜態方法會創建一個 DOMString，其中包含一個表示參數中給出的對象的 URL，這個 URL 對象表示指定的 File 對象或 Blob 對象。

element.setAttribute() 用來給指定 HTML 元素設置屬性，使用格式如下：

// name 為屬性名稱的字符串，value 為屬性的值
element.setAttribute(name, value);
  • element.style.display = "none" 給元素設置 CSS 為 display:none。
  • appendChild() 用於將一個節點附加到指定父節點的子節點列表的末尾。
  • click() 是點擊事件。
  • removeChild() 用於從 DOM 中刪除一個子節點，返回刪除的節點。
  • window.onload 用於處理元的加載事件。
  • addEventListener("click", (e)=>{})，表示監聽 click 事件，(e)=>{} 是一個回調函數。
  • => 表示箭頭函數。
  • if 語句，括號中的條件為真時，會執行 if 語句 {} 中的內容。

到此我們將文本內容保存到文件的小項目就完成啦！

📑 完整源碼下載⬇

這裡我給出瞭完整的源代碼，你可以下載並在自己的學習或者工作中使用

源碼地址

總結

希望通過上面的教程，大傢已經學會瞭如何使用 JavaScript 將文本內容保存到文件。同時我們也瞭解瞭 CSS 和 JS 中一些基礎知識，例如 <textarea> 標簽、placeholder 屬性、calc() 函數，還認識瞭 JavaScript 中三種引入方式和三種聲明方法。

更多關於JavaScript文本轉文件的資料請關註WalkonNet其它相關文章！

推薦閱讀：