用纯HTML写一个凭证并打印

作者：从前慢现在也慢 | 2024-02-26 08:47:13

踩

用纯HTML写一个凭证并打印

最近有个需求，需要通过网页把单子打印出来，就用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`类在打印时不显示。

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文档的结束标签。

具体效果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/145232