python+playwright+jinjia2渲染html并截图

是易安吖

已于 2023-03-14 21:21:03 修改

阅读量714

点赞数 1

文章标签： html python 前端

于 2023-01-11 17:02:23 首次发布

本文链接：https://blog.csdn.net/weixin_54659638/article/details/128647682

版权

1.html原文件

<!DOCTYPE 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.tech</a></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 = '''<li><a href="#">{}</a><p>{}</p></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文件：

<!DOCTYPE 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.tech</a></span></div>

<ul id="list"><li><a href="#">#巩固脱贫成果乡村振兴开新局#</a><p>[置顶]</p></li><li><a href="#">春晚</a><p>No.1</p></li><li><a href="#">初二女生为活命扎针超25000次</a><p>No.2</p></li><li><a href="#">什么环境下需要佩戴N95口罩</a><p>No.3</p></li><li><a href="#">微博年货节</a><p>No.4</p></li><li><a href="#">干咳咳痰是肺炎的判断标准吗</a><p>No.5</p></li><li><a href="#">张婉婷听到宋宁峰的话秒哭</a><p>No.6</p></li><li><a href="#">大爷摔倒躺藕田2天2夜才被发现</a><p>No.7</p></li><li><a href="#">鹰眼扮演者被扫雪机碾压腿部</a><p>No.8</p></li><li><a href="#">央视评部分国家限制中国旅客入境</a><p>No.9</p></li><li><a href="#">小狗趁主人不在家偷吃6颗布洛芬</a><p>No.10</p></li></ul>
</div>
</body>
</html>