如何根据template.html生成静态 HTML报告

最新推荐文章于 2024-06-29 10:47:50 发布

paperClub

最新推荐文章于 2024-06-29 10:47:50 发布

阅读量341

点赞数

分类专栏： paperClub专栏实用好玩有趣的小项目文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weixin_41809077/article/details/128771674

版权

paperClub专栏同时被 2 个专栏收录

33 篇文章 2 订阅

订阅专栏

实用好玩有趣的小项目

4 篇文章 0 订阅

订阅专栏

苦恼好几天了，不知道如何根据模板template.html优雅的生成美观的静态 HTML，无奈最后选择 Jinja2进行后端渲染，只能凑合用吧？效果：

就简单演示一下吧。

1. 编辑前端模板页面

这里为了演示，就简单也一个意思一下, 大家根据根据需要编写自己的逻辑。template.html如下：

<!DOCTYPE html>
<html align='center' lang="en">
<meta http-equiv="Content-Type"content="text/html;charset=gb2312">
<h1> PaperClub Web报告模板 </h1>
<body>
    <h2> 文献查重Web报告模板 (<a href="http://infersite.com/#/home"> paperClub </a>)</h2>
    <p> 查重平台 : PaperClub&nbsp;&nbsp;&nbsp;&nbsp;报告时间 : {{create_time}}  </p>
    <p> 检测结果 : {{state}}&nbsp;&nbsp;重复比率：{{rate}} </p>
    <h2>详细信息（demo）</h2>
    <table border="1" width = "40%" cellspacing='0' cellpadding='0' align='center' bgcolor="#6495ed">
    <tr>
        <th>论文题目</th>
        <th>论文作者</th>
        <th>论文字数</th>
        <th>重复字数</th>
        <th>重复比率</th>
    </tr>

    {% for item in data %}
    <tr align='center'>
        <td>{{ item.title }}</td>
        <td>{{ item.author }}</td>
        <td>{{ item.total_num }}</td>
        <td>{{ item.dup_num }}</td>
        <td>{{ item.rate }}</td>
    </tr>
    {% endfor%}
    </table>
    <h2>图片显示</h2>
    {% for item in data %}
        <p> {{item.title}} 检测结果【 {{item.state}} 】, 查重比率【 {{ item.rate }} 】</p>
        <a name="{{ item.image_path }}"> <img src="{{ item.image_path }}" width="640"></a>
        <br>
    {% endfor%}
    </body>
</html>

2. Jinja2后端渲染

app.py：

#!/usr/bin/env python
# -*- coding: utf-8 -*-
# @ Date    : 2023/1/27 14:46
# @ Author  : paperClub
# @ Email   : paperclub@163.com
# @ Site    :


from jinja2 import Environment, FileSystemLoader


def jinja2html(data, state, rate, create_time):
    env = Environment(loader=FileSystemLoader('./'))
    template = env.get_template('template.html')
    with open("result.html", 'w') as fout:
        html_content = template.render(state=state,
                                       rate=rate,
                                       create_time=create_time,
                                       data=data)
        fout.write(html_content)


if __name__ == "__main__":
    data = []
    result = {'title': 'xxx的研究', 'author': '张三',
              'total_num': "10000", 'dup_num': "28",
              'state': "合格", 'rate': "0.28%",
              'image_path': "img.png"}

    data.append(result)
    jinja2html(data, result.get('state'), result.get('rate'), '2023-01-05 15:33 44')

app.py 和template.html放在同一目录下，运行后输出 result.html文件。

输出的result.html：