Playwright 生成 pandas 样式截图

时间：2023-05-16 20:13:39 标签：pandas playwright 样式 截图

看过来

《pandas 教程》持续更新中，可作为 pandas 入门进阶课程、pandas 中文手册、用法大全，配有案例讲解和速查手册。提供建议、纠错、催更等加作者微信: gairuo123（备注：pandas教程）和关注公众号「盖若」ID: gairuo。查看更新日志。作者开办 Python 数据分析培训，详情 Python 数据分析培训。

本教程作者所著新书《深入浅出Pandas：利用Python进行数据处理与分析》（ISBN：9787111685456）已由机械工业出版社出版上市，各大电商平台有售，欢迎：查看详情并关注购买。

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

思路

大致思路是：

使用 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://www.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></head>
  <link rel="stylesheet" type="text/css" href="style.css"/>
  <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 样式，如果有需要可以联系站长索取哟。

（完）

Playwright 生成 pandas 样式截图

思路

代码示例

相关内容