极客教程JavaScript 使用文件系统访问API的简单文本编辑器
在本文中，我们将创建一个类似文本编辑器的应用程序，可以使用 文件系统访问API 来打开、编辑和保存文本文件。
文件系统访问API 使我们能够与本地设备上的文件进行交互，如照片和视频编辑器。当用户授予权限时，这可以帮助我们直接读取或保存更改到本地存储中的文件和文件夹。使用此API，我们可以读取、写入、修改文件，还可以打开目录以修改其内容。
我们将分三个步骤创建此应用程序：
- 使用HTML创建通用结构。
- 使用CSS添加通用样式。
- 使用文件系统访问API的JavaScript代码编写。
HTML代码： 我们将使用HTML来设计网页的结构或布局。创建一个包含文本区域和两个按钮用于打开文件和保存文件的容器。
<!DOCTYPE html>
<html>
<body>
<div class="container">
<!--Text Area -->
<textarea id="content"
placeholder="Lets Write ">
</textarea>
<!--Buttons -->
<div class="buttons">
<!--To open -->
<button id="openfile">
Open
</button>
<!-- To save-->
<button id="savefile">
Save
</button>
</div>
</div>
</body>
</html>
CSS代码： CSS被用来提供一般的样式和增强视觉效果。为整个页面提供一般的样式，比如颜色和对齐方式。我们使用 flex 来居中元素。在上述HTML代码中的head部分的style部分中包含以下内容。
/* General Alignment to container
using flexbox */
.container{
display: flex;
height: 100vh;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
/* Styling to the textarea */
textarea {
width: 90vw;
color: #777;
font-size: 1.1rem;
min-height: 20rem;
border: 2px dashed rgba(0, 0, 0, 0.2);
padding: 1.5rem;
}
/* Aligning buttons to center */
.buttons{
width: 100%;
display: flex;
justify-content: center;
}
/* General styling to button */
button{
margin:0 0.5rem;
font-size: 1.1rem;
font-weight: 800;
background-color: blue;
color: #ffffff;
padding: 1rem 1.5rem;
}
输出：
JavaScript: 我们将使用 文件系统 API 来打开、编辑和保存文件。我们将把 JavaScript 代码分为三个步骤。
- 创建变量并获取具有 id 的元素的访问权限，打开文件并保存文件。
- 创建一个打开文件的函数。
- 创建一个关闭文件的函数。
第1步： 获取元素的访问权限。
const openFile = document.getElementById('openfile');
const saveFile = document.getElementById('savefile');
const contentTextArea = document.getElementById('content');
let fileHandle;
第2步： 该步骤演示了打开文件的功能。为了打开一个文件，首先需要提示用户选择一个文件。我们将使用 showOpenFilePicker() 方法来实现这个功能。这个方法将返回一个文件句柄的数组。
现在我们有了一个文件句柄，可以通过使用 filehandle.getFile() 方法来访问文件本身。这个方法将返回包含Blob的文件对象。为了访问数据，我们将使用方法 text() 。
const open = async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
contentTextArea.value = contents;
}
第3步： 它展示了保存文件的功能。为了保存文件，我们将使用 showSaveFilePicker() 方法。我们还希望以.txt格式保存文件，因此我们将提供一些可选参数。
现在，我们需要将文件写入磁盘，为此我们将使用 FileSystemWritableFileStream 对象。我们将通过调用 createWritable() 方法来创建一个流。当调用此方法时，它将检查写入权限，如果没有给予权限，它将向用户请求权限。如果权限被拒绝，它将抛出异常。然后，我们将使用 write() 方法将文件的内容写入流中。我们将关闭可写流并返回句柄。
const save = async content => {
try {
const handle = await window.showSaveFilePicker({
types: [
{
accept: {
'text/plain': ['.txt'],
},
},
],
})
// Create a FileSystemWritableFileStream to write
const writable = await handle.createWritable();
// Write the contents of the file to the stream
await writable.write(content);
// Close the file and write the contents to disk
await writable.close();
return handle;
} catch (err) {
console.error(err.name);
}
}
在最后，我们将打开和保存方法与我们的变量open file和save file关联起来。
openFile.addEventListener('click', () => open());
saveFile.addEventListener('click',
() => save(contentTextArea.value));
源码：https://github.com/Nandini-72/Notepad