如何在JavaScript中覆盖文件？现有代码总是创建新文件

普通的<a>标签下载方式无法实现本地文件覆盖，这是浏览器的安全限制——网页不能直接修改本地文件系统中的已有文件，必须经过用户授权。要实现覆盖功能，需要使用File System Access API，它允许网页请求用户授权后读写本地文件。

以下是实现代码：

// 全局变量保存文件句柄，用于后续覆盖写入
let fileHandle = null;

async function saveFile() {
  // 获取文本框内容
  const content = document.querySelector("textarea").value;
  // 生成要保存的Blob对象
  const blob = new Blob([content], { type: 'text/plain' });

  // 如果没有保存过文件句柄，先请求用户选择/创建文件
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker({
      suggestedName: "myfireide.html",
      types: [{
        description: "HTML文件",
        accept: { "text/html": [".html"] }
      }]
    });
  }

  // 打开可写流并写入内容（覆盖原有文件）
  const writableStream = await fileHandle.createWritable();
  await writableStream.write(blob);
  await writableStream.close();

  saved = 1;
}

代码说明： #

• 第一次调用saveFile()时，会弹出文件选择对话框，让用户指定保存位置和文件名（默认是myfireide.html），同时获得该文件的句柄并保存。
• 后续调用saveFile()时，会直接使用已保存的文件句柄，打开可写流并写入新内容，自动覆盖原有文件。
• 兼容性：该API目前支持Chrome、Edge等Chromium内核浏览器，Firefox需在about:config中开启dom.fs.enabled和dom.fs.writable_files.enabled实验性选项。

内容的提问来源于stack exchange，提问作者Dinç Productions