? 項目基本結(jié)構(gòu)

目錄結(jié)構(gòu)如下：

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

本節(jié)教程我們通過文本轉(zhuǎn)換為文件的案例（如下圖所示）帶大家去認(rèn)識一下 JavaScript 吧！

知識點

• textarea 標(biāo)簽
• placeholder 屬性
• calc 函數(shù)
• js 中三種引入方式
• js 中三種聲明方法

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

在文件中添加 HTML 和 CSS 代碼創(chuàng)建這個項目的基礎(chǔ)結(jié)構(gòu)。

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

效果如下所示：

在上面代碼中，我們添加了一張背景圖片，并且在這里創(chuàng)建了一個寬度為 430px，背景顏色為白色的容器。

添加標(biāo)題

基本結(jié)構(gòu)有了，現(xiàn)在，我們在容器（#container）的頭部添加一個 h1 標(biāo)題。

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

這里我們設(shè)置標(biāo)題的字體大小為 30px，顏色為藍(lán)色。

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

效果如下所示：

創(chuàng)建一個多行文本框

現(xiàn)在我們在標(biāo)題下面創(chuàng)建一個文本框用來輸入（待轉(zhuǎn)換的）文本內(nèi)容。這個文本框是用 HTML 中的 textarea 標(biāo)簽來創(chuàng)建的。

<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 標(biāo)簽定義多行的文本輸入控件，文本區(qū)中可容納一段相當(dāng)長的、不限格式的文本。

placeholder 屬性規(guī)定描述文本區(qū)域預(yù)期值的簡短提示，提示會在文本區(qū)域為空時顯示。

創(chuàng)建一個單行文本框

接下來我們創(chuàng)建一個單行文本框用來輸入文件名。該框使用 input 標(biāo)簽來創(chuàng)建。

<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() 函數(shù)用于動態(tài)計算長度值，需要注意的是運算符前后都需要保留一個空格，可參考 MDN calc()。

保存文件的按鈕

現(xiàn)在我們需要創(chuàng)建一個下載按鈕。單擊此按鈕將下載轉(zhuǎn)換后的文本文件。

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

我們給按鈕設(shè)置一下樣式，盒子的寬度為 174 像素，高度為 50 像素，背景顏色使用了藍(lán)色。

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

效果如下所示：

頁面的效果現(xiàn)在已經(jīng)完成了，但是現(xiàn)在點擊按鈕，還不能下載文件。

JavaScript 該出場了。

使用 JavaScript 將文本保存到文件

在實驗介紹中已經(jīng)為大家介紹過了 JavaScript，這里給大家說一說它的引入方式。

如何在 HTML 頁面中引入 JavaScript？

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

• 內(nèi)聯(lián)：在標(biāo)簽的事件屬性中添加 js 代碼，當(dāng)事件觸發(fā)時執(zhí)行 js 代碼。
• 內(nèi)部：在 HTML 頁面的任意位置添加 script 標(biāo)簽，標(biāo)簽體內(nèi)寫 js 代碼，當(dāng)頁面加載時執(zhí)行。
• 外部：在單獨的 js 文件中寫 js 代碼，在 HTML 頁面中通過 script 標(biāo)簽的 src 屬性引入，頁面加載時執(zhí)行。

這里需要同學(xué)們注意一下，CSS 和 JS 的外部引入之間的區(qū)別，CSS 是使用 link 標(biāo)簽的 href 屬性來引入的，而 JS 是通過 script 標(biāo)簽的 src 屬性引入的。

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

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

my.js 中的內(nèi)容：

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

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

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

alert 是彈出一個警告框。

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

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

最終效果如下所示：

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

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

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

例如：

var blob = new Blob(["<html>…</html>"], { type: "text/html" });

• URL.createObjectURL() 表示靜態(tài)方法會創(chuàng)建一個 DOMString，其中包含一個表示參數(shù)中給出的對象的 URL，這個 URL 對象表示指定的 File 對象或 Blob 對象。

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

// name 為屬性名稱的字符串，value 為屬性的值
element.setAttribute(name, value);

• element.style.display = "none" 給元素設(shè)置 CSS 為 display:none。
• appendChild() 用于將一個節(jié)點附加到指定父節(jié)點的子節(jié)點列表的末尾。
• click() 是點擊事件。
• removeChild() 用于從 DOM 中刪除一個子節(jié)點，返回刪除的節(jié)點。
• window.onload 用于處理元的加載事件。
• addEventListener("click", (e)=>{})，表示監(jiān)聽 click 事件，(e)=>{} 是一個回調(diào)函數(shù)。
• => 表示箭頭函數(shù)。
• if 語句，括號中的條件為真時，會執(zhí)行 if 語句 {} 中的內(nèi)容。

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

?? 完整源碼下載?

這里我給出了完整的源代碼，你可以下載并在自己的學(xué)習(xí)或者工作中使用

源碼地址

總結(jié)

希望通過上面的教程，大家已經(jīng)學(xué)會了如何使用 JavaScript 將文本內(nèi)容保存到文件。同時我們也了解了 CSS 和 JS 中一些基礎(chǔ)知識，例如 <textarea> 標(biāo)簽、placeholder 屬性、calc() 函數(shù)，還認(rèn)識了 JavaScript 中三種引入方式和三種聲明方法。

更多關(guān)于JavaScript文本轉(zhuǎn)文件的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論