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

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

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

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

知識(shí)點(diǎn)

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

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

在文件中添加 HTML 和 CSS 代碼創(chuàng)建這個(gè)項(xià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)建了一個(gè)寬度為 430px，背景顏色為白色的容器。

添加標(biāo)題

基本結(jié)構(gòu)有了，現(xiàn)在，我們?cè)谌萜鳎?code>#container）的頭部添加一個(gè) h1 標(biāo)題。

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

這里我們?cè)O(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)建一個(gè)多行文本框

現(xiàn)在我們?cè)跇?biāo)題下面創(chuàng)建一個(gè)文本框用來(lái)輸入（待轉(zhuǎn)換的）文本內(nèi)容。這個(gè)文本框是用 HTML 中的 textarea 標(biāo)簽來(lái)創(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;
}

效果如下所示：

屬性說(shuō)明如下：

textarea 標(biāo)簽定義多行的文本輸入控件，文本區(qū)中可容納一段相當(dāng)長(zhǎng)的、不限格式的文本。

placeholder 屬性規(guī)定描述文本區(qū)域預(yù)期值的簡(jiǎn)短提示，提示會(huì)在文本區(qū)域?yàn)榭諘r(shí)顯示。

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

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

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

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

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

效果如下所示：

屬性說(shuō)明如下：

• calc() 函數(shù)用于動(dòng)態(tài)計(jì)算長(zhǎng)度值，需要注意的是運(yùn)算符前后都需要保留一個(gè)空格，可參考 MDN calc()。

保存文件的按鈕

現(xiàn)在我們需要?jiǎng)?chuàng)建一個(gè)下載按鈕。單擊此按鈕將下載轉(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;
}

效果如下所示：

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

JavaScript 該出場(chǎng)了。

使用 JavaScript 將文本保存到文件

在實(shí)驗(yàn)介紹中已經(jīng)為大家介紹過(guò)了 JavaScript，這里給大家說(shuō)一說(shuō)它的引入方式。

如何在 HTML 頁(yè)面中引入 JavaScript？

與 CSS 類(lèi)似，HTML 也可以使用三種方式引入 JavaScript。

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

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

我們來(lái)看一看下面的例子：

<!-- 內(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)容，效果如下（點(diǎn)擊右下方 Go Live 啟動(dòng) 8080 端口，打開(kāi) Web 服務(wù)）：

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

alert 是彈出一個(gè)警告框。

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

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

最終效果如下所示：

接下來(lái)，我們對(duì)上面的 JS 代碼做一下說(shuō)明～

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

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

例如：

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

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

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

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

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

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

?? 完整源碼下載?

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

源碼地址

總結(jié)

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

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

最新評(píng)論