在你的html页面里执行python----pyodide

红毛丹
1,078 阅读1分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，[点击查看活动详情] (juejin.cn/post/709970…)

💚 pyodide 介绍

Pyodide是CPython到WebAssembly/Emscripten的一个接口，主要在浏览器中使用。

Pyodide在浏览器中使用micropip安装和运行Python包。它附带了一个健壮的Javascript⟺ Python外部函数接口，这样您就可以在代码中自由地混合这两种语言，而不会产生太大的摩擦。这包括对错误处理（用一种语言抛出错误，用另一种语言捕获错误）、异步/等待等的完全支持。在浏览器中使用时，Python可以完全访问Web API。

💚 在浏览器使用python repl

体验地址 pyodide.org/en/stable/c…

页面截图如下

image.png

💚 在你的html代码执行python

首先在你的html代码里加入这行，引入pyodide

https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js

pyodide.js文件定义了一个名为loadPyodide的异步函数，该函数设置Python环境并返回Pyodide顶级名称空间。

async function main() {
  let pyodide = await loadPyodide();
  // Pyodide is now ready to use...
  console.log(pyodide.runPython(`
    import sys
    sys.version
  `));
};
main();

来看一个例子，详细代码如下

<!DOCTYPE html>
<html>
  <head>
      <script src="https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"></script>
  </head>
  <body>
    Pyodide test page <br>
    Open your browser console to see Pyodide output
    <script type="text/javascript">
      async function main(){
        let pyodide = await loadPyodide();
        console.log(pyodide.runPython(`
            import sys
            sys.version
        `));
        console.log(pyodide.runPython("print(1 + 2)"));
      }
      main();
    </script>
  </body>
</html>

我们保存到本地执行一下，

image.png

打开该页面的控制台，我们看到打印出了python版本和表达式的结果3

image.png

💚 在浏览器页面交互执行python

先看一个例子，在页面交互执行计算一个python列表的所有值相加之和

image.png

点击run，就在output输入框显示了计算的值

image.png

源码如下：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"></script>
  </head>

  <body>
    <p>
      You can execute any Python code. Just enter something in the box below and
      click the button.
    </p>
    <input id="code" value="sum([1, 2, 3, 4, 5])" />
    <button onclick="evaluatePython()">Run</button>
    <br />
    <br />
    <div>Output:</div>
    <textarea id="output" style="width: 100%;" rows="6" disabled></textarea>

    <script>
      const output = document.getElementById("output");
      const code = document.getElementById("code");

      function addToOutput(s) {
        output.value += ">>>" + code.value + "\n" + s + "\n";
      }

      output.value = "Initializing...\n";
      // init Pyodide
      async function main() {
        let pyodide = await loadPyodide();
        output.value += "Ready!\n";
        return pyodide;
      }
      let pyodideReadyPromise = main();

      async function evaluatePython() {
        let pyodide = await pyodideReadyPromise;
        try {
          let output = pyodide.runPython(code.value);
          addToOutput(output);
        } catch (err) {
          addToOutput(err);
        }
      }
    </script>
  </body>
</html>

后记

不仅可以在浏览器中使用，也可以在node.js中使用，当然python也可以执行js, 只需import js

avatar
文章
阅读
粉丝