python+playwright+jinjia2渲染html并截图
1.html原文件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 640px;
height: 480px;
border: 1px solid #d8d8d8;
margin: 50px auto;
overflow: hidden;
background: #dcf1f0;
}
.box .line{
width:600px;
height: 50px;
margin: 0 auto;
border-bottom: 1px solid #ddd;
line-height: 50px;
}
.box span{
font: bold 18px '楷体';
color: #000;
padding: 15px;
border-bottom: 2px solid red;
}
.box #more{
float: right;
font-weight: bold;
color: #9f9f9f;
text-decoration: none;
}
.box #more:hover{
color: red;
}
.box ul{
list-style: none;
width:600px;
height: 480px;
padding:0;
margin: 7px auto 0;
}
.box ul li{
height:36px;
border-bottom: 1px solid #ddd;
background: url(dot.gif) left center no-repeat;
}
.box ul a{
float:left;
height:36px;
font: bold 14px/36px '楷体';
text-decoration: none;
text-indent: 30px;
color: #000;
background: url(icon.jpg) 5px center no-repeat;
}
.box ul a:hover{
color: red;
}
.box ul p{
float: right;
height: 36px;
font:bold 14px/36px '微软雅黑';
color: #000;
}
style>
head>
<body>
<div class="box" id="content">
<div class='line'><span id="name" align="center">{{name}}by 易安 <a href="https://jingblog.tech">https://jingblog.techa>span>div>
<ul id="list">{{news}}ul>
div>
body>
html>
页面效果
放在templates/list.html文件中
2.导入需要的包
from jinja2 import Environment, FileSystemLoader
import time
import json
import aiohttp
import asyncio
from playwright.sync_api import sync_playwright
import os
3.数据示例
Headers = {"user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36"}
def get_time() -> str:
return time.strftime("%m{}%d{} %H:%M:%S").format('月', '日')
def get_li() -> str:
li = '''{}{}
'''
return li
async def get_weibo(amount: int) -> str:
title = "微博热搜"
name = "微博热搜-" + get_time()
li = get_li()
try:
async with aiohttp.ClientSession() as session:
async with session.get("https://weibo.com/ajax/statuses/hot_band", headers=Headers, timeout=5) as response:
RawData = await response.json()
Result = RawData["data"]["band_list"]
news = ""
Top = f'{RawData["data"]["hotgov"]["name"]}'
news += li.format(Top, "[置顶]")
for i in range(amount):
next_data = f'{Result[i]["note"]}'
news += li.format(next_data, "No." + str(i + 1))
data = Data(title, name, news)
return data
except:
return "获取信息失败"
class Data:
def __init__(self, title: str, name: str, news: str):
self.title = title
self.name = name
self.news = news
4.jinjia2渲染html
def generate_html(path: str, data: Data, result: str) -> None:
env = Environment(loader=FileSystemLoader('./'))
template = env.get_template(path)
with open(result,'w+', encoding='utf-8') as fout:
html_content = template.render(title=data.title,
name=data.name,
news=data.news)
fout.write(html_content)
其中env的FileSystemLoader设置为程序运行所在目录，path应该设置为该目录的相对路径。
5.playwright截图
def render_pic(path, result):
with sync_playwright() as p:
for browser_type in [p.chromium]:
print(f'start browser {browser_type.name} ...')
# playwright默认是无头模式
#browser = browser_type.launch()
# 指定为有头模式，方便查看界面
browser = browser_type.launch(headless=False)
context = browser.new_context()
page = context.new_page()
page.goto(path)
# screenshot
page.locator('#content').screenshot(path=result)
context.close()
browser.close()
6.测试程序
def main():
loop = asyncio.get_event_loop()
data = loop.run_until_complete(get_weibo(10))
template = "templates/list.html"
result = os.path.join(os.path.dirname(__file__), r"templates\result.html")
result_img = os.path.join(os.path.dirname(__file__), r"templates\result.png")
generate_html(template, data, result)
render_pic(result, result_img)
if __name__ == "__main__":
main()
把html文件放入程序所在目录的templates文件夹下，文件名为list.html
运行程序，会在templates文件夹下生成result.html文件和result.png文件。
7.运行结果
生成的result.html文件：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微博热搜title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 640px;
height: 480px;
border: 1px solid #d8d8d8;
margin: 50px auto;
overflow: hidden;
background: #dcf1f0;
}
.box .line{
width:600px;
height: 50px;
margin: 0 auto;
border-bottom: 1px solid #ddd;
line-height: 50px;
}
.box span{
font: bold 18px '楷体';
color: #000;
padding: 15px;
border-bottom: 2px solid red;
}
.box #more{
float: right;
font-weight: bold;
color: #9f9f9f;
text-decoration: none;
}
.box #more:hover{
color: red;
}
.box ul{
list-style: none;
width:600px;
height: 480px;
padding:0;
margin: 7px auto 0;
}
.box ul li{
height:36px;
border-bottom: 1px solid #ddd;
background: url(dot.gif) left center no-repeat;
}
.box ul a{
float:left;
height:36px;
font: bold 14px/36px '楷体';
text-decoration: none;
text-indent: 30px;
color: #000;
background: url(icon.jpg) 5px center no-repeat;
}
.box ul a:hover{
color: red;
}
.box ul p{
float: right;
height: 36px;
font:bold 14px/36px '微软雅黑';
color: #000;
}
style>
head>
<body>
<div class="box" id="content">
<div class='line'><span id="name" align="center">微博热搜-01月03日 14:50:46by 易安 <a href="https://jingblog.tech">https://jingblog.techa>span>div>
<ul id="list"><li><a href="#">#巩固脱贫成果乡村振兴开新局#a><p>[置顶]p>li><li><a href="#">春晚a><p>No.1p>li><li><a href="#">初二女生为活命扎针超25000次a><p>No.2p>li><li><a href="#">什么环境下需要佩戴N95口罩a><p>No.3p>li><li><a href="#">微博年货节a><p>No.4p>li><li><a href="#">干咳咳痰是肺炎的判断标准吗a><p>No.5p>li><li><a href="#">张婉婷听到宋宁峰的话秒哭a><p>No.6p>li><li><a href="#">大爷摔倒躺藕田2天2夜才被发现a><p>No.7p>li><li><a href="#">鹰眼扮演者被扫雪机碾压腿部a><p>No.8p>li><li><a href="#">央视评部分国家限制中国旅客入境a><p>No.9p>li><li><a href="#">小狗趁主人不在家偷吃6颗布洛芬a><p>No.10p>li>ul>
div>
body>
html>
渲染效果
