2

誰かが私の問題に光を当ててくれることを願っています。私は HTML/CSS/JavaScript 開発の初心者です。

請求書を作成するために、JinJa HTML テンプレートに入力する Python スクリプトがあります。この請求書には、約 50 の項目があります。請求書の作成 ヘッダー、本文 (請求明細行)、およびフッターを含む 1 つの 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",
))

私のジンジャ テンプレート コード:

<!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