基于JavaScript的在线Python编译器为何将输出打印至浏览器控制台？

我有以下基于Pyodide实现的HTML与JavaScript代码：

<!DOCTYPE html>
<html>
<head>
  <title>Pyodide Example</title>
  <script src="https://cdn.jsdelivr.net/pyodide/v0.21.3/full/pyodide.js"></script>
</head>
<body>
  <textarea id="code" rows="10" cols="50">print("Hello, World!")</textarea><br>
  <button id="run">Run Python Code</button>
  <pre id="output"></pre>

  <script src="script.js"></script>
</body>
</html>

async function main() {
  const pyodide = await loadPyodide({ indexURL: "https://cdn.jsdelivr.net/pyodide/v0.21.3/full/" });

  document.getElementById('run').addEventListener('click', async () => {
    const code = document.getElementById('code').value;
    try {
      let output = await pyodide.runPythonAsync(code);
      document.getElementById('output').textContent = output;
    } catch (error) {
      document.getElementById('output').textContent = error;
    }
  });
}

main();

运行Python代码时，结果会输出到浏览器控制台而非页面指定的output区域。我尝试修改HTML字段类型、使用window.alert，均未解决问题，请问这是为什么？

原因分析 #

问题核心在于两个点：

1. Pyodide默认将Python的print输出绑定到了浏览器的控制台，所以调用print时内容会直接输出到控制台，不会自动传递到页面的output元素中。
2. pyodide.runPythonAsync的返回值是你执行的Python代码最后一个表达式的结果，而print函数本身的返回值是None，所以你拿到的output变量实际是None，页面的output元素自然显示空内容。

解决方案 #

下面提供两种可行的解决方法，你可以根据需求选择：

方法一：全局重定向sys.stdout #

在加载Pyodide后，重定向Python的标准输出到自定义的捕获对象，这样所有print的内容都会被捕获，之后再提取显示到页面。

修改后的script.js代码：

async function main() {
  const pyodide = await loadPyodide({ indexURL: "https://cdn.jsdelivr.net/pyodide/v0.21.3/full/" });
  
  // 定义输出捕获对象并重定向sys.stdout
  pyodide.runPython(`
    import sys
    from io import StringIO

    class OutputCapture:
      def __init__(self):
        self.buffer = StringIO()
      def write(self, data):
        self.buffer.write(data)
      def getvalue(self):
        return self.buffer.getvalue()
      def flush(self):
        pass

    sys.stdout = OutputCapture()
  `);

  document.getElementById('run').addEventListener('click', async () => {
    const code = document.getElementById('code').value;
    try {
      await pyodide.runPythonAsync(code);
      // 获取捕获的输出内容
      const output = pyodide.runPython("sys.stdout.getvalue()");
      // 清空缓冲区，避免下次输出包含历史内容
      pyodide.runPython("sys.stdout.buffer.truncate(0)");
      pyodide.runPython("sys.stdout.buffer.seek(0)");
      document.getElementById('output').textContent = output;
    } catch (error) {
      document.getElementById('output').textContent = error;
    }
  });
}

main();

方法二：单次执行时捕获输出 #

如果不想全局重定向，可以在每次执行用户代码时，用Python的上下文管理器临时捕获输出，这种方式更灵活，不会影响其他Python代码的输出行为。

修改点击事件的逻辑即可：

async function main() {
  const pyodide = await loadPyodide({ indexURL: "https://cdn.jsdelivr.net/pyodide/v0.21.3/full/" });

  document.getElementById('run').addEventListener('click', async () => {
    const code = document.getElementById('code').value;
    try {
      // 将用户代码包裹在捕获输出的逻辑中
      const wrappedCode = `
        import sys
        from io import StringIO
        buffer = StringIO()
        with sys.stdout.redirected(buffer):
          ${code}
        buffer.getvalue()
      `;
      let output = await pyodide.runPythonAsync(wrappedCode);
      document.getElementById('output').textContent = output;
    } catch (error) {
      document.getElementById('output').textContent = error;
    }
  });
}

main();

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