跳到主要内容

账单

这段 HTML 代码是一份用于生成账单的网页模板，适合通过 BKHTMLTOPDF 工具转换为 PDF 格式。

预览​

Invoice Preview

HTML​

HTML 代码
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BKHTMLTOPDF 账单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: 'Inter 18pt', 'Noto Serif SC', sans-serif;
            box-sizing: border-box;
        }

        @media print {
            @page {
                size: A4;
                margin: 0;
            }
        }

        html, body {
            height: 100vh;
            width: 100vw;
        }

        body {
            padding: 3rem;
        }

        table {
            border-collapse: collapse;
            margin-bottom: 2rem;
            width: 100%;
        }

        .text-sm {
            font-size: .75rem;
        }

        .bg-gray {
            background-color: rgba(0, 0, 0, 0.08);
        }

        table tr td, table tr th {
            padding: 0.25rem;
            font-size: 0.85rem;
        }
    </style>
</head>
<body>
<table style="margin-bottom: 4rem">
    <tr>
        <td align="center">
            <img width="50%" src="https://www.bkhtmltopdf.com/img/logo.png" alt="Logo"/>
        </td>
    </tr>
</table>

<table class="bg-gray">
    <tr>
        <td><h2>账单编号 #123456789</h2></td>
    </tr>
    <tr>
        <td>账单日期：2025年10月10日</td>
    </tr>
    <tr>
        <td>到期日：2025年10月20日</td>
    </tr>
</table>
<table>
    <tr>
        <td>
            <h4>开票对象</h4>
            <p class="text-sm">汤姆·史密斯</p>
            <p class="text-sm">圣安东尼奥市</p>
            <p class="text-sm">橡树山道2732号</p>
            <p class="text-sm">美国</p>
        </td>
        <td align="right">
            <div style="width: 80px">
                <barcode type="qrcode" value="1234567890123456789"/>
                <p class="text-sm" style="text-align: center;color: gray">快递</p>
            </div>
        </td>
    </tr>
</table>

<table border="1">
    <thead>
    <tr class="bg-gray">
        <th>描述</th>
        <th>总计</th>
    </tr>
    </thead>
    <tbody>
    <tr class="text-sm">
        <td>
            <pre>
<b>BKHTMLTOPDF - Invoice Example</b>
For More: www.bkhtmltopdf.com
            </pre>
        </td>
        <td align="center" valign="top">$3.50 美元</td>
    </tr>
    <tr class="text-sm bg-gray">
        <td align="right"><b>小计</b></td>
        <td align="center" valign="top"><b>3.50 美元</b></td>
    </tr>
    <tr class="text-sm bg-gray">
        <td align="right"><b>信用额度</b></td>
        <td align="center" valign="top"><b>0.00 美元</b></td>
    </tr>
    <tr class="text-sm bg-gray">
        <td align="right"><b>总计</b></td>
        <td align="center" valign="top"><b>$3.50 美元</b></td>
    </tr>
    </tbody>
</table>

<h4 style="margin-bottom: 1rem">交易记录</h4>
<table border="1">
    <thead>
    <tr class="bg-gray">
        <th>交易日期</th>
        <th>支付网关</th>
        <th>交易ID</th>
        <th>金额</th>
    </tr>
    </thead>
    <tbody>
    <tr class="text-sm" align="center">
        <td>2025年10月10日</td>
        <td>PayPal</td>
        <td>P1234567890123456789</td>
        <td>3.50 美元</td>
    </tr>
    <tr class="text-sm bg-gray">
        <td align="right" colspan="3"><b>余额</b></td>
        <td align="center"><b>0.00 美元</b></td>
    </tr>
    </tbody>
</table>

<p class="text-sm" style="margin-top: 3rem;text-align: center;color: gray">
    PDF生成于
    <script>document.writeln(new Date().toUTCString())</script>
</p>
</body>
</html>

在线运行