如何将console.log(html)结果存入变量用于HTML展示？

问题根源 #

你之前尝试用return和arguments没生效，核心原因是runRtfjs内部的RTF解析、渲染都是异步操作（比如doc.render()返回Promise、JSDOM加载脚本也是异步流程），同步的返回方式根本拿不到异步执行后的结果。

解决方案 #

方案1：在现有回调中直接存储并处理 #

如果后续的HTML展示逻辑可以放在回调函数内执行，直接在回调里把html存入变量即可：

// 定义变量存储结果
let renderedHtml;

runRtfjs(
    filertf,
    (meta, html) => {
        // 将html存入变量
        renderedHtml = html;
        console.log("已存储的HTML内容:", renderedHtml);
        // 在这里直接编写后续展示逻辑
        // 浏览器环境示例：document.getElementById('target').innerHTML = renderedHtml;
        // Node环境生成HTML文件示例：require('fs').writeFileSync('result.html', renderedHtml);
    },
    error => console.error(error)
);

注意：由于是异步操作，不能在回调函数外部直接访问renderedHtml，必须等回调执行完成后才能拿到有效结果。

方案2：改造runRtfjs为Promise（推荐，逻辑更清晰） #

把runRtfjs改造成返回Promise的形式，就能用async/await语法像同步代码一样获取结果：

// 修改runRtfjs函数，返回Promise
function runRtfjs(rtf) {
    return new Promise((resolve, reject) => {
        const virtualConsole = new jsdom.VirtualConsole();
        virtualConsole.sendTo(console);

        new JSDOM(`
        <script src="./node_modules/rtf.js/dist/WMFJS.bundle.js"></script>
        <script src="./node_modules/rtf.js/dist/EMFJS.bundle.js"></script>
        <script src="./node_modules/rtf.js/dist/RTFJS.bundle.js"></script>

        <script>
            RTFJS.loggingEnabled(false);
            WMFJS.loggingEnabled(false);
            EMFJS.loggingEnabled(false);

            try {
                const doc = new RTFJS.Document(rtfFile);
                const meta = doc.metadata();
                doc.render().then(function(htmlElements) {
                    const div = document.createElement("div");
                    div.append(...htmlElements);
                    window.done(meta, div.innerHTML);
                }).catch(error => window.onerror(error))
            } catch (error){
                window.onerror(error)
            }
        </script>
        `, {
            resources: "usable",
            runScripts: "dangerously",
            url: "file://" + __dirname + "/",
            virtualConsole,
            beforeParse(window) {
                window.rtfFile = stringToArrayBuffer(rtf);
                window.done = function (meta, html) {
                    resolve({ meta, html });
                };
                window.onerror = function (error) {
                    reject(error);
                };
            }
        });
    });
}

// 使用async/await获取并存储结果
async function getRenderedHtml() {
    try {
        const { meta, html } = await runRtfjs(filertf);
        // 存入变量
        const renderedHtml = html;
        console.log("已存储的HTML内容:", renderedHtml);
        // 后续展示逻辑写在这里
        // 示例：document.body.innerHTML = renderedHtml;
    } catch (error) {
        console.error(error);
    }
}

// 执行函数
getRenderedHtml();

这种方式更符合现代JavaScript异步编程的习惯，代码逻辑更直观，也方便后续扩展其他操作。

内容的提问来源于stack exchange，提问作者Flávio