使用 JavaScript 在 HTML 按钮点击后写入文件-html教程-PHP中文网

使用 JavaScript 在 HTML 按钮点击后写入文件

碧海醫心

发布： 2025-10-21 12:22:34

原创

188人浏览过

使用 javascript 在 html 按钮点击后写入文件

本文介绍了如何使用 JavaScript 在 HTML 按钮点击事件触发后，将数据写入本地文件。通过 File API 和 Blob API，可以实现在客户端生成文件并提供下载的功能，从而避免直接操作服务器文件系统。

在 Web 开发中，有时需要在客户端生成文件并提供下载功能。虽然 JavaScript 本身无法直接访问本地文件系统进行写入操作，但可以借助 File API 和 Blob API 实现类似的效果。本文将详细介绍如何在 HTML 按钮点击事件触发后，使用 JavaScript 将数据写入本地文件。

核心思路

核心思路是利用 Blob 对象将数据封装成文件内容，然后创建一个 <a> 标签，设置其 href 属性为 Blob 对象的 URL，并模拟点击该链接，从而触发浏览器的下载行为。

立即学习“Java免费学习笔记（深入）”；

实现步骤

HTML 结构: 首先，需要在 HTML 文件中创建一个按钮，并绑定 onclick 事件，使其在点击时调用 JavaScript 函数。

<!DOCTYPE html>
<html>
<head>
    <title>Write to File</title>
</head>
<body>
    <button onclick="writeFile()">Write to File</button>
    <script src="script.js"></script>
</body>
</html>

登录后复制

JavaScript 代码: 在 script.js 文件中，编写 writeFile 函数，该函数负责创建 Blob 对象、生成 URL、创建 <a> 标签并触发下载。

黑点工具

在线工具导航网站，免费使用无需注册，快速使用无门槛。

查看详情

function writeFile() {
    const text = "Learning how to write in a file."; // 要写入文件的内容
    const filename = "output.txt"; // 文件名

    const blob = new Blob([text], { type: 'text/plain' }); // 创建 Blob 对象
    const url = URL.createObjectURL(blob); // 生成 Blob URL

    const a = document.createElement('a'); // 创建 <a> 标签
    a.href = url; // 设置 href 属性为 Blob URL
    a.download = filename; // 设置 download 属性为文件名
    document.body.appendChild(a); // 将 <a> 标签添加到 body 中
    a.click(); // 模拟点击 <a> 标签
    document.body.removeChild(a); // 移除 <a> 标签
    URL.revokeObjectURL(url); // 释放 Blob URL
}

登录后复制

代码详解

new Blob([text], { type: 'text/plain' }): 创建一个 Blob 对象，第一个参数是一个数组，包含了要写入文件的内容。第二个参数是一个对象，指定了文件的 MIME 类型，这里是 text/plain，表示纯文本文件。
URL.createObjectURL(blob): 使用 Blob 对象创建一个 URL，这个 URL 可以作为 <a> 标签的 href 属性值。
a.download = filename: 设置 <a> 标签的 download 属性，指定下载文件的文件名。
URL.revokeObjectURL(url): 释放之前创建的 Blob URL，防止内存泄漏。

完整示例

将上面的 HTML 和 JavaScript 代码保存为 index.html 和 script.js 文件，然后在浏览器中打开 index.html。点击 "Write to File" 按钮，浏览器会提示下载一个名为 output.txt 的文件，其中包含 "Learning how to write in a file." 的内容。

注意事项