JavaScript實現文字轉換為檔案範例詳解

2022-08-16 18:00:15

✨ 專案基本結構

目錄結構如下：

├── 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實現文字轉換為檔案範例詳解

目錄

✨ 專案基本結構

知識點

新增標題

建立一個多行文字方塊

建立一個單行文字方塊

儲存檔案的按鈕

使用 JavaScript 將文字儲存到檔案

熱門文章