Playwright 生成 pandas 样式截图

看过来

《pandas 教程》持续更新中，提供建议、纠错、催更等加作者微信: gairuo123（备注：pandas教程）和关注公众号「盖若」ID: gairuo。跟作者学习，请进入 Python学习课程。欢迎关注作者出版的书籍：《深入浅出Pandas》和《Python之光》。

pandas 的样式功能非常强大，适合在 Notebook 上可视化展示数据，但我们要将它输出图片时，怎么办呢？这时我们可以用 Playwright 可配合完成这项工作。关于 Playwright 的安装可以参考 Playwright 现代web应用端到端测试中的介绍。

学习提示

本案例涉及异步操作，请在 PyCharm、VScode 等编辑器中以脚本文件形式执行，不要使用 Jupyter。同时要安装 Playwright ，详见前段中的链接。

思路

大致思路是：

使用 pandas 加载数据并创建 DataFrame：使用 pandas 库加载你的数据，可以从 CSV 文件、数据库或其他数据源中读取数据，并将其组织为 DataFrame 对象。DataFrame 是一个二维表格结构，类似于数据库中的表。

使用 pandas 的样式功能自定义 DataFrame 的样式：利用 pandas 的 style 属性，可以使用各种样式函数来自定义 DataFrame 的外观。你可以设置背景颜色、字体样式、添加边框等。根据你的需求，选择适当的样式函数，如 background-color、font-weight、border 等。通过调用样式函数并传递给 style 属性，可以应用样式到 DataFrame 中的单元格。

将样式导出为 HTML：使用 to_html() 方法将带有样式的 DataFrame 转换为 HTML 字符串。这样会生成一个包含样式的 HTML 表格。

使用 Playwright 进行网页截图：使用 Playwright 库打开一个网页，并将前一步中生成的 HTML 字符串加载到网页中。然后使用 Playwright 的截图功能，将网页内容及样式一起截图并保存为图像文件。

代码示例

我们给出一个样例，代码如下：

# 截图 pandas 的表格样式
from pathlib import Path
import pandas as pd
from playwright.sync_api import sync_playwright

df = pd.read_csv('https://gairuo.com/file/data/team.csv')

style = (df.head(10)
         .assign(avg=df.mean(axis=1, numeric_only=True))  # 增加平均值
         .assign(diff=lambda x: x.avg.diff())  # 和前位同学差值
         .style
         .bar(color='yellow', subset=['Q1'])
         .bar(subset=['avg'], width=90, vmin=60, vmax=100, color='#5cadad')
         .bar(subset=['diff'], color=['#ffe4e4', '#bbf9ce'], vmin=0, vmax=30, align='zero')
         )

html_string = '''
<html>
  <head><title>我的图表</title>
  <link rel="stylesheet" type="text/css" href="style.css"/>
  </head>
  <body>
    {table}
  </body>
</html>
'''

html = html_string.format(table=style.to_html())  # 生成 html 内容

# 生成 html 文件
with open('data.html', 'w') as f:
    f.write(html)

# 打开文件、截图
with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.set_viewport_size({"width": 720, "height": 350})
    page.wait_for_timeout(10000)
    page.goto(Path('data.html').absolute().as_uri())
    page.screenshot(path='data.jpg', type='jpeg', full_page=True, quality=100, scale='css')
    browser.close()
    print('生成图片完成!')

最终生成了一个名为 data.jpg 的图片，其中 style.css 为网页和表格提供了基础的 CSS 样式。

附 style.css 内容：

caption{
    font-size: 1.3em;
    margin-bottom: .5em;
}

table {
    border: 1px solid #aac1de;
    border-collapse: collapse;
    border-spacing: 0;
    color: black;
    text-align: center;
    font-size: 11px;
    min-width: 100%;
}

thead {
    border-bottom: 1px solid #aac1de;
    vertical-align: bottom;
    background-color: #eff5fb;
}

tr {
    border: 1px dotted #aac1de;
}

td {
    vertical-align: middle;
    padding: 0.5em;
    line-height: normal;
    white-space: normal;
    max-width: 150px;
}

th {
    font-weight: bold;
    vertical-align: middle;
    padding: 0.5em;
    line-height: normal;
    white-space: normal;
    max-width: 150px;
    text-align: center;
}

（完）

Playwright 生成 pandas 样式截图

思路

代码示例

相关内容