当需要在网页中操作本地文件时，我们可以使用JavaScript中的File API来实现。
写入txt文件示例
下面是一个将输入框中的文本写入txt文件的示例。
HTML部分
<body>
<input type="text" id="input">
<button onclick="writeText()">保存</button>
</body>
JavaScript部分
function writeText() {
// 获取文本框中的内容
const content = document.getElementById("input").value;
// 创建Blob对象
const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
// 生成a标签，用于下载文件
const a = document.createElement("a");
a.download = "text.txt";
a.href = URL.createObjectURL(blob);
// 模拟点击a标签下载文件
a.click();
}
在以上代码中，我们首先通过document.getElementById()方法获取了输入框中的文本内容，然后创建了一个带有文本内容的Blob对象。接着使用URL.createObjectURL()方法生成一个下载链接，最后通过a.click()模拟用户点击下载链接的动作，从而下载文件。
读取txt文件示例
下面是一个从txt文件中读取内容的示例。
HTML部分
<body>
<input type="file" id="file-input">
<div id="content"></div>
</body>
JavaScript部分
const fileInput = document.getElementById('file-input');
const contentDiv = document.getElementById('content');
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) {
return;
}
const reader = new FileReader();
reader.onload = () => {
contentDiv.innerText = reader.result;
};
reader.readAsText(file);
});
在以上代码中，我们通过document.getElementById()方法获取了文件选择框和文本显示区域，然后注册了一个change事件，当用户选择了文件后触发。在事件回调函数中，首先获取用户选择的文件，并创建一个FileReader对象。然后使用reader.readAsText()方法以文本形式读取用户选择的文件内容，并更新文本显示区域的内容。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Javascript写入txt和读取txt文件示例 - Python技术站
微信扫一扫 
支付宝扫一扫 