页面写入文本后读取为空，无法导出CSV的技术问题求助

我正在开发一个包含JavaScript的简单HTML网页，通过fetch读取info.json文件中的数据，借助JavaScript格式化文本后准备导出为CSV文件。

问题在于，当我将文本写入页面后尝试读取时，得到的是Empty字符串，导致无法导出。目前我用console.log测试输出，但未得到预期结果。使用container.innerHTML += "....."时能正确显示内容，但调用print函数读取时内容异常。另外我无法使用TimeOuts，因为数据加载时长不固定，首次可能3秒，后续可能40秒。

现有代码 #

JavaScript代码 #

document.addEventListener('DOMContentLoaded', function () {
    convertData();
});

function convertData() {
    fetch('info.json')
    .then(response => response.json())
    .then(data => showData(data))
    .then(print())
    .catch(error => console.error('Error:', error));
}

function showData(data) {
    const container = document.getElementById("container");

    for (var i = 0; i < data["data"].length; i++) {
        var obj = data["data"][i];

        container.innerHTML += "<br>" + obj["field1"] + "; " + obj["field2"] + "; "
    }
}

function print() {
    const container = document.getElementById("container");
    const data = container.innerHTML;
    console.log(data);   
}

HTML代码 #

<!DOCTYPE html>
<html>
  <body>
    <div id="container"></div>
  </body>
</html>

问题原因与解决方法 #

核心问题 #

代码里的.then(print())是立即执行了print函数，而非把print作为回调传给Promise的then方法。这导致print在showData还没处理完数据、未往container写入内容时就已经执行，所以读到的是空字符串。

修复方案 #

方案1：修正Promise链的回调调用

把.then(print())改成.then(print)，让print在showData执行完成后再被调用：

function convertData() {
    fetch('info.json')
    .then(response => response.json())
    .then(data => showData(data))
    .then(print) // 去掉括号，传递函数引用
    .catch(error => console.error('Error:', error));
}

方案2：更优做法——不依赖DOM存储数据

没必要把CSV内容写到DOM里再读取，直接在处理数据时生成CSV字符串，更高效可靠：

document.addEventListener('DOMContentLoaded', function () {
    convertData();
});

function convertData() {
    fetch('info.json')
    .then(response => response.json())
    .then(data => generateCsv(data))
    .then(csvContent => {
        console.log(csvContent);
        // 直接执行导出CSV逻辑
        downloadCsv(csvContent, 'data.csv');
    })
    .catch(error => console.error('Error:', error));
}

function generateCsv(data) {
    // 写入表头（按需调整）
    let csv = 'field1;field2\n';
    // 遍历生成数据行
    data.data.forEach(obj => {
        csv += `${obj.field1};${obj.field2}\n`;
    });
    return csv;
}

function downloadCsv(content, filename) {
    const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

这种方式完全绕开DOM，直接在内存中生成CSV内容，避免了DOM操作的异步问题，也更贴合导出CSV的业务逻辑。

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