用纯HTML写一个凭证并打印

news2025/1/22 17:56:28

最近有个需求，需要通过网页把单子打印出来，就用html实现了一个，主要使用了windwos自带的print打印，全部代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>标题</title>
    <style type="text/css" media="all">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px
        }

        table {
            width: 90%;
            border: 1px solid #000;
            border-collapse: collapse;
            margin: 5px auto
        }

        th,
        td {
            border: 1px solid #000;
            border-collapse: collapse;
            padding: 8px 5px
        }

        h1 {
            font-size: 24px
        }

        @media print {
            .no-print {
                display: none;
            }
        }

        .headStyle{
            width: 90%;
            display: flex;
            justify-content: space-between;
            border-collapse: collapse;
            margin: 5px auto;
        }
        .headTitleLift{
            display: flex;
        }
        .title {
            display: flex;
            flex-direction: column;
            align-items: end;
        }
        .title div {
            margin-bottom: 5px; /* 为了增加行间距 */
        }
        .content div {
            margin-bottom: 5px; /* 为了增加行间距 */
        }

        .foot{
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            width: 90%;
            justify-content: space-between;
            border-collapse: collapse;
            margin: 5px auto;
        }
        .foot div {
            margin-right: 50px; /* 设置项目间距为10像素 */
        }

    </style>
</head>

<body>
<div class="no-print" style="text-align:center;margin:5px">
    <button onClick="window.print()"> 打 印</button>
</div>

<h1 style="text-align: center;">某某的单子要打印</h1>
<p style="text-align: center;">
    日期： <span id="currentDate"></span>
</p>




<div class="headStyle">
    <div class="headTitleLift">
        <div class="title">
            <div >水单位：</div>
            <div >对应水票编号：</div>
        </div>

        <div class="content">
            <div >XXXX</div>
            <div >203023032</div>
        </div>
    </div>

    <div class="headTitleLift">
        <div class="title">
            <div >供水渠系：</div>
            <div >灌季：</div>
        </div>

        <div class="content">
            <div >XX有限公司</div>
            <div >冬季 </div>
        </div>
    </div>

</div>



<div class="table-box">
    <table>
        <thead>
        <tr>
            <th> 斗口</th>
            <th> 申请面积(亩)</th>
            <th> 灌溉定额(方/亩)</th>
            <th> 申请水量(方)</th>
            <th> 开始时间</th>
            <th> 结束时间</th>
            <th> 计划用时(时分秒)</th>
            <th> 斗口流量(方/秒)</th>
            <th> 备注</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td> 1</td>
            <td> 数据1</td>
            <td> 数据2</td>
            <td> 数据3</td>
            <td> 数据4</td>
            <td> 数据5</td>
            <td> 数据6</td>
            <td> 数据7</td>
            <td> 数据8</td>
        </tr>
        <tr>
            <td> 2</td>
            <td> 数据1</td>
            <td> 数据2</td>
            <td> 数据3</td>
            <td> 数据4</td>
            <td> 数据5</td>
            <td> 数据6</td>
            <td> 数据7</td>
            <td> 数据8</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <th>合计：</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th> 300.00</th>
            <th> 300.00</th>
            <th> 300.00</th>
        </tr>
        </tfoot>
    </table>
</div>

<div class="foot">
    <div>水管所审核：单打独斗</div>
    <div>配水员：李刚</div>
    <div>支（渠）长：可</div>
    <div>用水单位(签字)：单打独斗</div>

</div>


<script>
    // 获取当前日期
    var currentDate = new Date();
    var year = currentDate.getFullYear();
    var month = currentDate.getMonth() + 1;
    var day = currentDate.getDate();

    // 更新页面上的日期显示
    document.getElementById("currentDate").innerText = year + "年" + month + "月" + day + "日";
</script>

</body>

</html>

以下是代码中每行的作用解释：

1. `<!DOCTYPE html>`：声明文档类型为HTML5，告诉浏览器以HTML5标准解析页面

2. `<html>`：HTML文档的根元素，包含整个HTML内容。

3. `<head>`：包含了文档的元数据，如标题、样式表和脚本等信息。

4. `<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>`：设置文档的字符编码为UTF-8，确保正确显示中文等特殊字符。

5. `<title>配水单</title>`：设置页面的标题为"配水单"。

6. `<style type="text/css" media="all">`：开始定义内联CSS样式。

7. `* { margin: 0; padding: 0; font-size: 12px }`：设置全局样式，将所有元素的外边距、内边距和字体大小设为12像素。

8. `table { ... }`：定义表格的样式，包括宽度、边框等。

9. `th, td { ... }`：定义表头和单元格的样式，包括边框和内边距。

10. `h1 { font-size: 24px }`：设置h1标题的字体大小为24像素。

11. `@media print { ... }`：定义在打印模式下的样式，这里设置了`.no-print`类在打印时不显示。