用纯HTML写一个凭证并打印

共计 3729 个字符,预计需要花费 10 分钟才能阅读完成。

最近有个需求,需要通过网页把单子打印出来,就用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>

最后效果
用纯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`类在打印时不显示。

12. `.headStyle { … }`、`.headTitleLift { … }`、`.title { … }`等:定义了一些自定义样式,用于配水单头部和表格的布局。

13. `<body>`:包含了页面的主体内容。

14. `<div class=”no-print” …>`:一个不打印的div,包含了打印按钮,点击该按钮可以触发打印功能。

15. `<h1>`:页面标题,显示”甘肃省引大秦工程管理配水单”。

16. `<p>`:段落元素,显示日期信息。

17. `<div class=”headStyle”>`:头部样式的div容器,包含水单位、供水渠系等信息。

18. `<div class=”table-box”>`:表格容器,包含了配水表格。

19. `<div class=”foot”>`:页脚容器,包含了审核和签字信息。

20. `<script>`:JavaScript脚本部分,用于获取当前日期并更新页面上的日期显示。

21. `// 获取当前日期`:注释,解释下面代码的作用。

22. `var currentDate = new Date();`:创建一个Date对象,表示当前日期和时间。

23. `var year = currentDate.getFullYear();`、`var month = currentDate.getMonth() + 1;`、`var day = currentDate.getDate();`:分别获取当前日期的年、月、日。

24. `document.getElementById(“currentDate”).innerText = year + “年” + month + “月” + day + “日”;`:将获取的年月日信息更新到页面上id为”currentDate”的span元素中,显示当前日期。

25. `</body>`:HTML文档的body结束标签。

26. `</html>`:HTML文档的结束标签。

正文完
公众号
post-qrcode
 1
qin, yufen
版权声明:本站原创文章,由 qin, yufen 2024-02-18发表,共计3729字。
转载说明:本文未经作者允许,不允许任何形式的转载。如有侵权,请发送邮件给 [email protected]及时联系删除。