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小時內與您取得聯系。

整合營銷服務商