2

我希望有人能对我的问题有所了解，提醒一下我是 HTML/CSS/JavaScript 开发的新手。

我有一个 Python 脚本，它填写 JinJa HTML 模板来创建发票。在这张发票上，我有大约 50 行项目。创建发票作品 我有一个带有页眉、正文（发票行）和页脚的 HTML 页面。但我想要实现的是创建带有页码的多页发票。例如，每个页面最多只能包含 15 个行项目，然后再次创建页眉部分、正文和页脚并继续，直到行项目完成。我可以使用页码创建多​​个页面，但每个页面的内容都是相同的，我想不出一种方法来实现这一点。

我的python代码：

from jinja2 import Environment, FileSystemLoader
import os
root = os.path.dirname(os.path.abspath(__file__))
templates_dir = os.path.join(root, 'templates')
env = Environment( loader = FileSystemLoader(templates_dir) )
template = env.get_template('invoice.html')
invoice_id = "BI-09994"

filename = os.path.join(root, 'html', invoice_id + '.html')
with open(filename, 'w') as fh:
fh.write(template.render(
    lines    = [("101211036", 'Volvo D13 FH12 Oil Filter', 3, "1000.00" , "3000.00"), ("101211037", 
'Volvo2', 1, "20.00", "20.00"), ("101211038", 'Volvo3', 1, "3000.00", "3000.00"),("101211036", 
'Volvo1', 3, "1000.00" , "3000.00"), ("101211037", 'Volvo2', 1, "20.00", "20.00"), ("101211038", 
'Volvo3', 1, "3000.00", "3000.00"),("101211036", 'Volvo1', 3, "1000.00" , "3000.00"), ("101211037", 
'Volvo2', 1, "20.00", "20.00"), ("101211038", 'Volvo3', 1, "3000.00", "3000.00"),("101211036", 
'Volvo1', 3, "1000.00" , "3000.00"), ("101211037", 'Volvo2', 1, "20.00", "20.00"), ("101211038", 
'Volvo3', 1, "3000.00", "3000.00"),("101211036", 'Volvo1', 3, "1000.00" , "3000.00"), ("101211037", 
'Volvo2', 1, "20.00", "20.00"), ("101211038", 'Volvo3', 1, "3000.00", "3000.00"),("101211036", 
'Volvo1', 3, "1000.00" , "3000.00"), ("101211037", 'Volvo2', 1, "20.00", "20.00"), ("101211038", 
'Volvo3', 1, "3000.00", "3000.00")],
     pages = [(1),(2),(3)],
    invoice_id = invoice_id,
    credted_date = "2020/04/22",
    due_date = "2020/04/29",
    comp_name = "BI - Applications",
    comp_addr1 = "305 Kerkenberg Avenue",
    comp_addr2 = "Villieria, Pretoria",
    comp_addr3 = "South - Africa, 0187",
    client_name = "Tecfinity (PTY) LTD",
    client_addr1 = "8 Osborn Lane",
    client_addr2 = "East Gate, Johannesburg",
    client_addr3 = "South - Africa, 0189",
    po_no = "Derick Mulder",
    ps_no = "BPS98007",
))

我的 Jinja 模板代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{invoice_id}}</title>

<style>
.invoice-box {
    max-width: 800px;
    margin: auto;
    padding: 30px;
    border: 1px solid #eee;
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    font-size: 16px;
    line-height: 24px;
    font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
    color: #555;

}

.invoice-box table {
    width: 100%;
    line-height: inherit;
    text-align: left;

}

.invoice-box table td {
    padding: 2px;
    vertical-align: middle;

}

.invoice-box table tr td:nth-child(2) {
    text-align: right;

}

.invoice-box table tr.top table td {
    padding-bottom: 20px;

}

.invoice-box table tr.top table td.title {
    font-size: 45px;
    line-height: 45px;
    color: #333;
}

.invoice-box table tr.information table td {
    padding-bottom: 40px;

}

.invoice-box table tr.heading td {
    background: #eee;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
}

.invoice-box table tr.details td {
    padding-bottom: 20px;
}

.invoice-box table tr.item td{
    border-bottom: 1px solid #eee;

}

.invoice-box table tr.item.last td {
    border-bottom: none;
}

.invoice-box table tr.total td:nth-child(5) {
    border-top: 2px solid #eee;
    font-weight: bold;
    text-align: right;
}

@media only screen and (max-width: 600px) {
    .invoice-box table tr.top table td {
        width: 100%;
        display: block;
        text-align: center;
    }

    .invoice-box table tr.information table td {
        width: 100%;
        display: block;
        text-align: center;
    }
}

/** RTL **/
.rtl {
    direction: rtl;
    font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}

.rtl table {
    text-align: right;
    table-layout:fixed;
}

.rtl table tr td:nth-child(2) {
    text-align: left;
}
</style>
</head>
{% for page in pages %}
<body>
<div class="invoice-box">
    <table cellpadding="0" cellspacing="0">
        <tr class="top">
            <td colspan="5">
                <table>
                    <tr>
                        <td class="title">
                            <img src="https://www.bi-applications.co.za/wp-content/uploads/2020/04/Embliam-only.png" style="width:100%; max-width:150px;">
                        </td>

                        <td>

                            Invoice #: {{invoice_id}}<br>
                            Created: {{credted_date}}<br>
                            Due: {{due_date}}<br>
                            P/O: {{po_no}}<br>
                            P/S: {{ps_no}}
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr class="information">
            <td colspan="5">
                <table>
                    <tr>
                        <td>
                            {{comp_name}}<br>
                            {{comp_addr1}}<br>
                            {{comp_addr2}}<br>
                            {{comp_addr3}}
                        </td>

                        <td>
                            {{client_name}}<br>
                            {{client_addr1}}<br>
                            {{client_addr2}}<br>
                            {{client_addr3}}
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr class="top">
            <td colspan="5">
                <table>
                    <tr>
                        <td class="title" align="center">
                            TAX INVOICE
                        </td>

                    </tr>
                </table>
            </td>
        </tr>

        <tr class="heading">
            <td>
                Part No
            </td>

            <td style="text-align:left">
                Description
            </td>

            <td style="text-align:right">   
                Qty
            </td>

            <td style="text-align:right">
                Unit
            </td>

            <td style="text-align:right">
                Price
            </td>

        </tr>

        {% for stk in lines %}
        <tr class="item">
            <td >
                {{stk[0]}}
            </td>
            <td style="text-align:left; word-break:break-all;" >
                {{stk[1]}}
            </td>
            <td style="text-align:right" >
                {{stk[2]}}
            </td>
            <td style="text-align:right">
                {{stk[3]}}
            </td>
            <td style="text-align:right">
                {{stk[4]}}
            </td>

        </tr>
             {% endfor %}


        <tr class="total">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td colspan="4">
               Total: R 38 500.00
            </td>
        </tr>

    </table>
        {{ page[0] }}
        Page : {{page}}
</div>

</body>

{% endfor %}
</html>

javaScript 会帮我解决这个问题吗？例如，在加载时动态创建页眉，开始循环填写行项目，直到达到每页的最大行数，创建页脚部分，页眉部分并继续正文

希望以上内容有意义

4

0 回答 0