在浏览器中创建与保存文件：解决require未定义错误并掌握客户端文件操作

// 创建一个包含文本内容的Blob对象
const textContent = "这是我希望保存到文件中的内容。";
const blob = new Blob([textContent], { type: "text/plain;charset=utf-8" });

<label for="inputfilename">输入文件名：</label>
<input type="text" id="inputfilename" value="my_generated_file">
<p id="output"></p>
<br>
<button id="submitbutton" onclick="createFileAndDownload()">生成并下载文件</button>

function createFileAndDownload() {
    const filenameInput = document.getElementById("inputfilename");
    const outputParagraph = document.getElementById("output");
    const filename = filenameInput.value.trim() || "untitled.txt"; // 获取文件名，默认为untitled.txt

    const fileContent = "这是通过原生JavaScript在浏览器中生成的文件内容。\n当前时间：" + new Date().toLocaleString();

    try {
        // 1. 创建Blob对象
        const blob = new Blob([fileContent], { type: "text/plain;charset=utf-8" });

        // 2. 创建一个临时的URL
        const url = URL.createObjectURL(blob);

        // 3. 创建一个隐藏的<a>标签
        const a = document.createElement('a');
        a.href = url;
        a.download = filename + ".txt"; // 设置下载的文件名

        // 4. 模拟点击<a>标签触发下载
        document.body.appendChild(a); // 某些浏览器需要将a标签添加到DOM中才能触发点击
        a.click();

        // 5. 释放URL对象和移除<a>标签
        document.body.removeChild(a);
        URL.revokeObjectURL(url); // 释放内存

        outputParagraph.innerHTML = `文件 "${a.download}" 已生成并触发下载！`;
    } catch (error) {
        outputParagraph.innerHTML = "生成文件时发生错误：" + error.message;
        console.error("文件生成错误:", error);
    }
}

npm install file-saver

<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>

<label for="inputfilename">输入文件名：</label>
<input type="text" id="inputfilename" value="my_generated_file_with_lib">
<p id="output"></p>
<br>
<button id="submitbutton" onclick="createFileWithLib()">使用库生成并下载文件</button>

// 如果是模块化项目，需要导入：
// import { saveAs } from 'file-saver';

function createFileWithLib() {
    const filenameInput = document.getElementById("inputfilename");
    const outputParagraph = document.getElementById("output");
    const filename = filenameInput.value.trim() || "untitled.txt";

    const fileContent = "这是通过file-saver库在浏览器中生成的文件内容。\n当前时间：" + new Date().toLocaleString();

    try {
        // 1. 创建Blob对象
        const blob = new Blob([fileContent], { type: "text/plain;charset=utf-8" });

        // 2. 调用saveAs函数保存文件
        // 确保 file-saver 库已正确引入，如果通过CDN，saveAs将是全局变量
        if (typeof saveAs === 'function') {
            saveAs(blob, filename + ".txt");
            outputParagraph.innerHTML = `文件 "${filename}.txt" 已通过file-saver生成并触发下载！`;
        } else {
            outputParagraph.innerHTML = "错误：file-saver库未加载或saveAs函数不可用。";
            console.error("file-saver库未加载或saveAs函数不可用。");
        }
    } catch (error) {
        outputParagraph.innerHTML = "生成文件时发生错误：" + error.message;
        console.error("文件生成错误:", error);
    }
}

const express = require('express');
const fs = require('fs');
const path = require('path');
const cors = require('cors'); // 用于处理跨域请求

const app = express();
const PORT = 3000;

app.use(express.json()); // 解析JSON格式的请求体
app.use(cors()); // 允许所有来源的跨域请求，实际项目中应配置更严格的CORS策略

// 定义一个API路由来创建文件
app.post('/create-file', (req, res) => {
    const { filename, content } = req.body;

    if (!filename || !content) {
        return res.status(400).json({ success: false, message: '文件名和内容不能为空。' });
    }

    const filePath = path.join(__dirname, 'uploads', `${filename}.txt`); // 文件将保存在服务器的uploads文件夹中

    // 确保uploads目录存在
    if (!fs.existsSync(path.join(__dirname, 'uploads'))) {
        fs.mkdirSync(path.join(__dirname, 'uploads'));
    }

    fs.writeFile(filePath, content, (err) => {
        if (err) {
            console.error('服务器创建文件失败:', err);
            return res.status(500).json({ success: false, message: '服务器创建文件失败。' });
        }
        console.log(`文件 "${filename}.txt" 已在服务器上创建。`);
        res.json({ success: true, message: `文件 "${filename}.txt" 已在服务器上创建。` });
    });
});

app.listen(PORT, () => {
    console.log(`服务器运行在 http://localhost:${PORT}`);
});

<label for="serverFilename">服务器文件名：</label>
<input type="text" id="serverFilename" value="server_file">
<p id="serverOutput"></p>
<br>
<button id="createServerFileButton" onclick="createFileOnServer()">在服务器上创建文件</button>

async function createFileOnServer() {
    const filenameInput = document.getElementById("serverFilename");
    const outputParagraph = document.getElementById("serverOutput");
    const filename = filenameInput.value.trim() || "untitled_server_file";

    const fileContent = "这是通过Node.js服务器创建的文件内容。\n客户端请求时间：" + new Date().toLocaleString();

    try {
        const response = await fetch('http://localhost:3000/create-file', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                filename: filename,
                content: fileContent
            })
        });

        const data = await response.json();

        if (data.success) {
            outputParagraph.innerHTML = data.message;
        } else {
            outputParagraph.innerHTML = "服务器响应错误：" + data.message;
        }
    } catch (error) {
        outputParagraph.innerHTML = "与服务器通信时发生错误：" + error.message;
        console.error("服务器文件创建请求失败:", error);
    }
}