如何用AngularJS 1.6.4+NodeJS将DIV内HTML导出至服务器文件？

别慌，这个需求拆成前端（AngularJS）和后端（NodeJS）两部分来做就很清晰了，我给你一步步拆解：

前端（AngularJS 1.6.4）部分 #

首先在你的AngularJS控制器里，我们要实现exportDocument()函数，核心就是两步：拿到目标DIV的HTML内容，再把内容通过HTTP请求发给后端接口。

先确保控制器注入了$http服务，然后写具体逻辑：

angular.module('yourAppName', [])
.controller('YourController', ['$http', function($http) {
    var vm = this;

    vm.exportDocument = function() {
        // 获取目标DIV的HTML内容
        var divContent = document.getElementById('exportme').innerHTML;
        
        // 发送POST请求到后端接口
        $http.post('/api/export-html', { content: divContent })
            .then(function(response) {
                alert('导出成功！');
                console.log('服务器返回:', response.data);
            })
            .catch(function(error) {
                alert('导出失败，请检查后端服务');
                console.error('请求错误:', error);
            });
    };
}]);

对应的HTML要绑定好控制器，比如：

<div ng-controller="YourController as vm">
    <div id="exportme"> I need to be exported <br /> To a HTML document </div> 
    <button ng-click="vm.exportDocument()">Export DIV</button>
</div>

后端（NodeJS）部分 #

后端我们用Express框架来写接口，再用NodeJS内置的fs模块把内容写入/tmp目录的HTML文件里。

1. 初始化项目并安装依赖 #

先创建NodeJS项目（如果还没的话），然后安装Express：

mkdir html-export-server && cd html-export-server
npm init -y
npm install express

2. 编写后端代码（比如server.js） #

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

// 解析JSON格式的请求体（Express 4.16+自带，无需额外装body-parser）
app.use(express.json());

// 处理跨域（如果前端和后端不在同一域名下，必须加这个）
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'POST');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

// 处理导出请求的接口
app.post('/api/export-html', (req, res) => {
    try {
        const htmlContent = req.body.content;
        // 用时间戳生成唯一文件名，避免覆盖已有文件
        const fileName = `exported_${Date.now()}.html`;
        const filePath = path.join('/tmp', fileName);

        // 写入文件到/tmp目录
        fs.writeFileSync(filePath, htmlContent, 'utf8');
        
        res.status(200).json({ 
            success: true, 
            message: `文件已导出到 ${filePath}` 
        });
    } catch (error) {
        console.error('写入文件错误:', error);
        res.status(500).json({ 
            success: false, 
            message: '导出失败，服务器内部错误' 
        });
    }
});

// 启动服务器，监听3000端口
const PORT = 3000;
app.listen(PORT, () => {
    console.log(`服务器运行在 http://localhost:${PORT}`);
});

3. 启动后端服务 #

node server.js

测试流程 #

1. 确认后端服务启动成功
2. 打开你的AngularJS前端页面
3. 点击"Export DIV"按钮，后端就会自动把DIV内容写入/tmp目录下的HTML文件啦

注意：如果前端和后端运行在不同端口，后端的跨域配置要确保正确；另外，服务器的/tmp目录需要有写入权限哦。

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