PyScript：让Python在HTML中运行

家好，我是DD，已经是封闭在家的第51天了！

最近一直在更新Java新特性（https://www.didispace.com/java-features/）和IDEA Tips（https://www.didispace.com/idea-tips/）两个原创专栏，其他方向内容的动态关注少了。昨天天晚上刷推的时候，瞄到了这个神奇的东西，觉得挺cool的，拿出来分享下：

相信你看到图，不用我说，你也猜到是啥了吧？html里可以跑python代码了！

看到好多Python公众号已经开始猛吹未来了，但乍看怎么觉得有点像JSP？或者一些模版引擎？是进步还是倒退呢？与其瞎想，不如仔细看看这个东东的能力吧！

根据官方介绍，这个名为PyScript的框架，其核心目标是为开发者提供在标准HTML中嵌入Python代码的能力，使用 Python调用JavaScript函数库，并以此实现利用Python创建Web应用的功能。

看到介绍里提到了调用JavaScript函数库的能力，看来跟JSP或者模版引擎还是有区别的。

PyScript 快速体验

官方给了一个例子，可以帮助我们观的感受这个开发框架的能力，不妨跟着DD看看，它能做啥吧！

第一个案例，hello world

代码很简单，就下面这几行。你只需要创建一个html文件，然后复制进去就可以了。

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body> 
    <py-script> 
        print('Hello, World!') 
    </py-script> 
  </body>
</html>

保存好之后，在浏览器里打开就能看到这样的页面了：

回头再看看这个html里的内容，三个核心内容：

引入pyscript的样式文件：<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
引入pyscript的脚本文件：<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-script>标签中写具体的python代码来输出Hello World

如果你懒得自己敲代码的话，本文的两个案例代码我打包放在公众号了，需要的朋友可以关注公众号“程序猿DD”，回复：pyscript 获取。

第二个案例，数据定义 + 数据展示

先创建一个data.py文件，然后加入前面的代码。功能很简单，就是随机生成（x，y）的坐标

import numpy as np

def make_x_and_y(n):
    x = np.random.randn(n)
    y = np.random.randn(n)
    return x, y

再创建一个html文件，加入下面的代码

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
        - numpy
        - matplotlib
        - paths:
          - /data.py
      </py-env>
    </head>

  <body>
    <h1>Let's plot random numbers</h1>
    <div id="plot"></div>
    <py-script output="plot">
    import matplotlib.pyplot as plt
    from data import make_x_and_y

    x, y = make_x_and_y(n=1000)

    fig, ax = plt.subplots()
    ax.scatter(x, y)
    fig
    </py-script>
  </body>
</html>

这里就稍微复杂一些了，除了hello world中的几个要点外，这里还有这几个要关注的地方：

<py-env>标签：这里声明要引入的包和要引入的文件（上面创建的data.py）
<py-script output="plot">：这里定义了要在<div id="plot"></div>中输出的内容，可以看到这里的逻辑都是用python写的

这个页面的执行效果是这样的：

是不是很神奇呢？整个过程中都没有大家熟悉的cs、js内容，就完成了这样一个图的页面实现。

小结

最后，谈谈在整个尝试过程中，给我的几个感受：

开发体验上高度统一，对于python开发者来说，开发Web应用的门槛可以更低了
感觉性能上似乎有所不足，几个复杂的案例执行有点慢，开始以为是部分国外cdn的缘故，后来移到本地后，还是慢。这部分可能还需要进一步优化。

这个开发框架目前还只是alpha版本，未来一定还会有更多特性与优化出来，总体上我觉得这个框架还是非常cool的，尤其对于刚学会Python，或者只会Python，但又想快速开发Web应用的小伙伴来说，可能将会是个不错的选择，那你觉得这个框架如何？未来会不会火？留言区聊聊吧！

是下一个大事件吗？如果继续发展下去，有可能。

在 2022 年 PyCon 美国大会期间，作为主题演讲嘉宾之一的 Peter Wang 公布了 PyScript，一种在 HTML 中直接编写 Python 脚本的方法。或许你不知道 Peter，但你可能听说过 Anaconda，这是一种流行的开源的 Python 和 R 语言的发行版本，特别关注数据科学。Peter 正是 Anaconda 的 CEO 和联合创始人。

换言之，PyScript 是由一家著名的科技公司开发的，这可能会保证它在不久的将来成为可行的方案。它在 Python 和 Web 开发者中受到了极大的关注，GitHub 上已有超过 10k 颗 Stars。然而，它是否能成为一个成功的、有竞争力的产品，取决于长期的时间和开发投入。目前，它还有一些已知的缺陷（将在最后讨论）。

闲话少说，让我们快速了解一下这个令人振奋的产品吧！

py-script 标签

我们知道，HTML 文件是大多数网站最常见的元素。在创建网站时，我们的工作就是直接或间接地通过一些框架来编制 HTML 文件。在典型的 HTML 文件中，你会看到各种类型的标签。例如，<head>定义了 HTML 页面的元数据和关键信息，<title>是整个文档的标题，而<h1>、<h2>等定义了不同级别的内容标题。

如前所述，PyScript 允许你在 HTML 中编写 Python 脚本，它使用一个特殊的标签py-script。在这个标签中，你可以嵌入 Python 脚本。要了解它是如何工作的，可以创建一个 HTML 文件，其中包含以下代码，并使用 Chrome 浏览器打开该文件。在 Chrome 浏览器中，你应该能够看到类似下面这样的内容：

作者截图

在上面的代码片段中，你可能已经注意到以下三个关键点：

link标签定义了一个外部样式表。在这个例子中，我们使用了 PyScript 提供的css文件。
我们使用script标签来嵌入一个由src定义、由 PyScript 托管的外部脚本。我们使用了defer，这样脚本会在下载和页面解析完成后执行——本质上是一种延迟执行，而不是实时执行。
最有趣的部分是py-script标签。如你所见，print("Hello, World!")是 Python 代码。当执行 HTML 文件时，就可以看到代码求值结果。

这很酷，不是吗？如果你不熟悉 Web 开发，但了解 Python，就可以使用 PyScript 嵌入任何有效的 Python 代码。让我们再看一个例子。

另一个 PyScript 示例（图片由作者提供）

在这里，我们写了一些需要计算的代码，可以看到，脚本得到了正确的执行。

py-env 标签

在编写更复杂的代码时，就需要使用第三方库。在这种情况下，我们可以利用py-env标签。你可能已经猜到的，env 是 environment 的缩写。py-env标签中列出了运行代码所需的 Python 包。

你可能知道，许多数据科学家都使用 pandas 进行数据处理工作。让我们看看下面的例子。

使用包的 PyScript（图片由作者提供）

如你所见，我们在py-env标签中指定了依赖项（即 Pandas），该标签包含在head标签中。如果页面需要多个依赖项，可以在这里把它们全部列出：

<py-env>
  - pandas
  - matplotlib
  - numpy
</py-env>

复制代码

如你所见，在py-script标签中，我们确实可以使用 Pandas 库来创建一个DataFrame对象。然而，当我们把打印出来时就会发现，它是一个单行，而不是一个结构化的数据表。没有一个适当的结构，我们就无法理解这些数据。幸运的是，我们可以使用write函数（下文会讨论）。

将内容写入指定标签

除了 Python 中的标准打印函数print，作为脚本的一部分，PyScript 有自己的write函数，可以将数据发送到页面上指定的 Web 元素中。请看下面的例子：

PyScript 写函数 write（图片由作者提供）

与之前的例子相比，上述代码片段有两个重大变化：

我们现在定义了一个 id 为"DataFrame"的div，这样稍后就可以引用。
在py-script标签中，我们创建一个与之前相同的DataFrame对象。但现在，我们不是调用print，而是调用pyscript.write函数，请求 PyScript 处理并在"DataFrame"中显示DataFrame对象。从输出可以看到，我们现在有一个结构化的表格了。

write函数不仅能够打印表格，还能够打印数字。下面的例子向你展示了我们如何使用matplotlib（一个流行的 Python 包，用于数据可视化）来显示由 Python 创建的图。

PyScript 打印图（图片由作者提供）

如你所见，write 函数以期望的方式显示了图。

py-repl 标签

Python 学习的最好方法之一是使用 REPL：读取（Read）、求值（Evaluate）、打印（Print）和循环（Loop）。也就是说，使用一个交互式的 Python 控制台，输入一些代码，Python 对其进行求值并打印适当的输出，然后重复这个过程。Web 页面也可以提供这样的 REPL 环境，比如 Jupyter Notebook。

PyScript 可以使用py-repl标签提供与此类似的东西。在这个元素中，你可以让用户自己编写代码，也可以以编程方式输入代码。请看下面的例子：

PyScript REPL（图片由作者提供）

如你所见，上图中有一个单元格，其中包括在py-repl标签中指定的代码。值得注意的是，单元格中的代码可以引用我们之前在py-script标签中定义的变量。一切看起来都很协调。

感想

本文介绍的内容是现阶段 PyScript 所能提供的主要亮点。它似乎是一个很有前途的产品，因为它提供了一个灵活的框架，让 Python 程序员可以在没有太多 Web 开发知识的情况下创建 Web 应用。然而，也有其他类似的成功的产品，因此，竞争会很激烈。

例如，如果我需要为自己的数据科学项目创建一个 Web 应用，我就会直接使用 Streamlit。它的功能已经相对成熟。请注意，虽然都与 Web 开发有关，但 PyScript 和 Streamlit 属于不同的产品系。PyScript 应该更通用，因为它的目标是让你可以在任何网页上嵌入任何 Python 代码，Streamlit 做不到这一点。

在 PyScript 为更多的人所接受之前，它有几个问题必须解决。例如，Web 页面的加载速度非常慢。如果你尝试跟随本教程运行代码，可能就会注意到，在 Web 页面的显示会有一个明显的滞后。

尽管如此，我还是觉得这个产品会继续发展，我的信心主要来自于它的开发者——给我们带来极好的 Anaconda 工具的 Anaconda 团队。

本文最初发布于 Better Programming。

查看英文原文：Running Python Scripts on the Web Using PyScript

了解更多软件开发与相关领域知识，点击访问 InfoQ 官网：https://www.infoq.cn/，获取更多精彩内容！

详细]php调用python脚本，将word转为html代码及调用失败处理

起因：因为公司遇到发稿问题，很多人喜欢用word编码，然后再发布到网站上。PHP的包中虽然有部分可以使用的类库，但是对于图片始终处理不好，我就想到了python。研究了下，python将word转为html还真是方便。但是，怎么结合到服务器上呢？我们的服务器是用PHP开发的。

1：python脚本

#!/usr/bin/python# -*- coding: UTF-8 -*-import sysfrom pydocx import PyDocXreload(sys)sys.setdefaultencoding('utf8')FileName = sys.argv[1] #获取文件名参数ShortName = sys.argv[2] #获取文件名参数html = PyDocX.to_html(FileName) # f = open("/www/wwwroot/micuer.com/pythoncode/runtime/99.txt", 'w') #服务器的全路径# f.write(html)# f.close()print(html)

2:php处理脚本

public function uploadword(){        try {            $file = request()->file("file");            // 上传到本地服务器            $savename = \think\facade\Filesystem::disk('upload')->putFile( 'word', $file);            $shotrname = time().".txt"; // 短名称            $savename = "/www/wwwroot/micuer.com/data/upload/".$savename; //Request::domain().            $python_file_name = "/www/wwwroot/micuer.com/pythoncode/WordToHtml.py";            //组装命令            $cmd = "python {$python_file_name} ".$savename." {$shotrname}  2>error.txt 2>&1";            $res = exec($cmd,$array, $ret);            return json(["code"=>200,"msg"=>"成功","data"=>$savename,"cmd"=>$cmd,"array"=>$array]);        } catch (think\exception\ValidateException $e) {            return json(["code"=>40000,"msg"=>$e->getMessage()]);        }    }

上传界面如下：

实现的功能就是利用PHP的exec函数，调用py脚本，将html代码返回给前台服务器。

返回数据如下

其实，再处理这个方案中，也遇到了很多问题，比如在命令行下只能成功，但是exec函数执行不成功等等。
参考了资料：https://my.oschina.net/u/4427610/blog/3155816
也就是

exec("python python_test.py 2>error.txt 2>&1", $array, $ret);

在bash中0,1,2三个数字分代表STDIN_FILENO、STDOUT_FILENO、STDERR_FILENO，即标准输入（一般是键盘），标准输出（一般是显示屏，准确的说是用户终端控制台），标准错误（出错信息输出）。
也可以通过以下方式将标准错误重定向到标准输出保存到$array中：
打印之后，发现是没有权限调用。于是就直接改为输出了，也就是 py的print(html)函数。

注意几点：
1：执行权限问题
2：exec(“python python_test.py 2>error.txt 2>&1”, $array, $ret); 中 $array就接受到了 print(html)的值
3：各个脚本尽量使用全路径

在线咨询

上一篇：Java中如何使用正则技术提取html中的任意内容
下一篇：混搭模板：7个现代网站的免费HTML/CSS模板

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商