如何通过JS获取输入框文件名并将HTML文件写入指定目录？

你现有代码存在两个核心问题：

• 取值时机错误：title变量在页面加载初始化时就获取了输入框的值，此时用户还未输入内容，拿到的是空值，必须放到点击触发的append函数内部，触发时再实时取值。
• 运行环境API不匹配：普通浏览器环境不存在全局FileSystem.writeFile方法，浏览器有严格的安全沙箱限制，网页默认不能直接往用户本地磁盘的任意路径写入文件，需要根据实际运行场景选择对应方案。

场景1：普通浏览器端网页，需要写入用户指定的本地目录 #

使用现代Chromium内核浏览器（Chrome/Edge 86+）支持的File System Access API实现，流程是触发操作时先让用户选择目标保存目录，获取权限后写入文件，代码示例：

// 缓存用户选择过的目录句柄，无需每次重复选择
let targetDirHandle = null;

async function append(){
    // 点击触发时再取输入的文件名，不要在全局提前取值
    const title = document.getElementById("docTitle").value;
    // 替换为你实际生成的HTML文档内容
    const htmlContent = "<html><body>生成的文档内容</body></html>";

    // 第一次操作时唤起目录选择器，让用户指定保存位置
    if (!targetDirHandle) {
        targetDirHandle = await window.showDirectoryPicker({
            mode: 'readwrite' // 申请目录读写权限
        });
    }

    try {
        // 在选中目录下创建对应名称的文件
        const fileHandle = await targetDirHandle.getFileHandle(title, { create: true });
        // 创建可写流写入内容
        const writable = await fileHandle.createWritable();
        await writable.write(htmlContent);
        await writable.close();
        console.log("文档创建成功，已写入指定目录");
    } catch (error) {
        // 统一处理错误：用户拒绝权限、文件名非法、磁盘写入失败等
        console.error("写入失败:", error);
    }
}

// 如果是通过HTML的onclick属性绑定事件，需要把函数挂到window作用域
// window.append = append;

注意：该API仅在HTTPS环境、本地localhost调试环境下可用，不支持HTTP普通页面；如果需要兼容不支持该API的旧浏览器，只能用传统的Blob+a标签触发下载的方式，这种方式会弹出系统下载框，无法静默写入指定目录。

旧浏览器兼容的下载写法：

function append(){
    const title = document.getElementById("docTitle").value;
    const htmlContent = "<html><body>生成的文档内容</body></html>";
    const blob = new Blob([htmlContent], {type: 'text/html'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = title;
    a.click();
    URL.revokeObjectURL(url);
}

场景2：Node.js/Electron桌面应用环境，需要写入本地固定目录 #

直接使用Node.js原生fs模块即可，你之前只传文件名的写法，会把文件写到Node进程的当前运行目录，要写入指定目录只需要把目标目录路径和文件名拼接成完整路径即可，代码示例：

// 引入Node原生模块
const fs = require('fs/promises');
const path = require('path');

// 配置固定的文件保存目录，Windows路径示例：'C:\\my_html_docs'，Mac/Linux路径示例：'/Users/xxx/my_html_docs'
const TARGET_SAVE_DIR = path.resolve(__dirname, 'saved_html_docs');

async function append(){
    const title = document.getElementById("docTitle").value;
    const htmlContent = "<html><body>生成的文档内容</body></html>";
    // 拼接完整的文件保存路径
    const savePath = path.join(TARGET_SAVE_DIR, title);
    try {
        // 如果目标目录不存在则自动创建
        await fs.mkdir(TARGET_SAVE_DIR, { recursive: true });
        // 写入文件
        await fs.writeFile(savePath, htmlContent, 'utf-8');
        console.log("文件已成功写入：", savePath);
    } catch (error) {
        console.error("写入失败：", error);
    }
}

如果要使用你原本的回调风格写法，对应调整即可：

const fs = require('fs');
const path = require('path');
const TARGET_SAVE_DIR = path.resolve(__dirname, 'saved_html_docs');

function append(){
    const title = document.getElementById("docTitle").value;
    const htmlContent = "<html><body>生成的文档内容</body></html>";
    const savePath = path.join(TARGET_SAVE_DIR, title);
    
    fs.mkdir(TARGET_SAVE_DIR, { recursive: true }, (mkdirErr) => {
        if (mkdirErr) return console.error(mkdirErr);
        fs.writeFile(savePath, htmlContent, (error) => {
            if (error) return console.error("写入失败：", error);
            console.log("写入成功");
        });
    });
}

内容的提问来源于stack exchange，提问作者user18055567