开源一夏 | 使用 JavaScript 将文本转换为文件
在线演示地址:https://haiyong.site/tools/wenben.html
码上掘金地址:https://code.juejin.cn/pen/7130896449063583784
✨ 项目基本结构
目录结构如下:
本节教程我们通过文本转换为文件的案例(如下图所示)带大家去认识一下 JavaScript 吧!
知识点
textarea 标签
placeholder 属性
calc 函数
js 中三种引入方式
js 中三种声明方法
首先还是跟往常一样新建一个 HTML 页面,在文件中输入英文 !
,然后按 tab
键生成模板。
在文件中添加 HTML 和 CSS 代码创建这个项目的基础结构。
效果如下所示:
在上面代码中,我们添加了一张背景图片,并且在这里创建了一个宽度为 430px
,背景颜色为白色的容器。
添加标题
基本结构有了,现在,我们在容器(#container
)的头部添加一个 h1
标题。
这里我们设置标题的字体大小为 30px
,颜色为蓝色。
效果如下所示:
创建一个多行文本框
现在我们在标题下面创建一个文本框用来输入(待转换的)文本内容。这个文本框是用 HTML 中的 textarea
标签来创建的。
然后给文本框添加一些样式。
效果如下所示:
属性说明如下:
textarea
标签定义多行的文本输入控件,文本区中可容纳一段相当长的、不限格式的文本。placeholder
属性规定描述文本区域预期值的简短提示,提示会在文本区域为空时显示。
创建一个单行文本框
接下来我们创建一个单行文本框用来输入文件名。该框使用 input
标签来创建。
然后给输入框添加一些样式。
效果如下所示:
属性说明如下:
calc()
函数用于动态计算长度值,需要注意的是运算符前后都需要保留一个空格,可参考 MDN calc()。
保存文件的按钮
现在我们需要创建一个下载按钮。单击此按钮将下载转换后的文本文件。
我们给按钮设置一下样式,盒子的宽度为 174
像素,高度为 50
像素,背景颜色使用了蓝色。
效果如下所示:
页面的效果现在已经完成了,但是现在点击按钮,还不能下载文件。
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
属性引入的。
我们来看一看下面的例子:
my.js
中的内容:
三种方式均可成功输出内容,效果如下(点击右下方 Go Live
启动 8080 端口,打开 Web 服务):
在上面例子中,onclick
是绑定的点击事件,当点击这个元素会被触发;alert
是弹出一个警告框。
接下来我们使用内部引入的方式添加 JS 代码,用来实现文件下载的功能。
最终效果如下所示:
接下来,我们对上面的 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 类型,表示文本的类型为数组或者字符串。例如:
URL.createObjectURL()
表示静态方法会创建一个DOMString
,其中包含一个表示参数中给出的对象的 URL,这个 URL 对象表示指定的 File 对象或 Blob 对象。element.setAttribute()
用来给指定 HTML 元素设置属性,使用格式如下:
element.style.display = "none"
给元素设置 CSS 为display:none
。appendChild()
用于将一个节点附加到指定父节点的子节点列表的末尾。click()
是点击事件。removeChild()
用于从 DOM 中删除一个子节点,返回删除的节点。window.onload
用于处理元的加载事件。addEventListener("click", (e)=>{})
,表示监听click
事件,(e)=>{}
是一个回调函数。=>
表示箭头函数。if
语句,括号中的条件为真时,会执行if
语句{}
中的内容。
到此我们将文本内容保存到文件的小项目就完成啦!
📑 完整源码下载⬇
这里我给出了完整的源代码,你可以下载并在自己的学习或者工作中使用,下载地址:
1.码上掘金地址:https://code.juejin.cn/pen/7130896449063583784
2.GitHub 地址(给个 star ❤️ 吧):https://github.com/wanghao221/moyu
总结
希望通过上面的教程,大家已经学会了如何使用 JavaScript 将文本内容保存到文件。同时我们也了解了 CSS 和 JS 中一些基础知识,例如 <textarea>
标签、placeholder
属性、calc()
函数,还认识了 JavaScript 中三种引入方式和三种声明方法。
版权声明: 本文为 InfoQ 作者【海拥(haiyong.site)】的原创文章。
原文链接:【http://xie.infoq.cn/article/b3d10c2146f4592fbe08af97f】。
本文遵守【CC-BY 4.0】协议,转载请保留原文出处及本版权声明。
评论