• 用纯HTML写一个凭证并打印

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

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    6.     <title>标题title>
    7.     <style type="text/css" media="all">
    8.         * {
    9.             margin: 0;
    10.             padding: 0;
    11.             font-size: 12px
    12.         }
    13.  
    14.         table {
    15.             width: 90%;
    16.             border: 1px solid #000;
    17.             border-collapse: collapse;
    18.             margin: 5px auto
    19.         }
    20.  
    21.         th,
    22.         td {
    23.             border: 1px solid #000;
    24.             border-collapse: collapse;
    25.             padding: 8px 5px
    26.         }
    27.  
    28.         h1 {
    29.             font-size: 24px
    30.         }
    31.  
    32.         @media print {
    33.             .no-print {
    34.                 display: none;
    35.             }
    36.         }
    37.  
    38.         .headStyle{
    39.             width: 90%;
    40.             display: flex;
    41.             justify-content: space-between;
    42.             border-collapse: collapse;
    43.             margin: 5px auto;
    44.         }
    45.         .headTitleLift{
    46.             display: flex;
    47.         }
    48.         .title {
    49.             display: flex;
    50.             flex-direction: column;
    51.             align-items: end;
    52.         }
    53.         .title div {
    54.             margin-bottom: 5px; /* 为了增加行间距 */
    55.         }
    56.         .content div {
    57.             margin-bottom: 5px; /* 为了增加行间距 */
    58.         }
    59.  
    60.         .foot{
    61.             display: flex;
    62.             flex-direction: row;
    63.             align-items: flex-start;
    64.             width: 90%;
    65.             justify-content: space-between;
    66.             border-collapse: collapse;
    67.             margin: 5px auto;
    68.         }
    69.         .foot div {
    70.             margin-right: 50px; /* 设置项目间距为10像素 */
    71.         }
    72.  
    73.     style>
    74. head>
    75.  
    76. <body>
    77. <div class="no-print" style="text-align:center;margin:5px">
    78.     <button onClick="window.print()"> 打 印button>
    79. div>
    80.  
    81. <h1 style="text-align: center;">某某的单子要打印h1>
    82. <p style="text-align: center;">
    83.     日期： <span id="currentDate">span>
    84. p>
    85.  
    86.  
    87.  
    88.  
    89. <div class="headStyle">
    90.     <div class="headTitleLift">
    91.         <div class="title">
    92.             <div >水单位：div>
    93.             <div >对应水票编号：div>
    94.         div>
    95.  
    96.         <div class="content">
    97.             <div >XXXXdiv>
    98.             <div >203023032div>
    99.         div>
    100.     div>
    101.  
    102.     <div class="headTitleLift">
    103.         <div class="title">
    104.             <div >供水渠系：div>
    105.             <div >灌季：div>
    106.         div>
    107.  
    108.         <div class="content">
    109.             <div >XX有限公司div>
    110.             <div >冬季 div>
    111.         div>
    112.     div>
    113.  
    114. div>
    115.  
    116.  
    117.  
    118. <div class="table-box">
    119.     <table>
    120.         <thead>
    121.         <tr>
    122.             <th> 斗口th>
    123.             <th> 申请面积(亩)th>
    124.             <th> 灌溉定额(方/亩)th>
    125.             <th> 申请水量(方)th>
    126.             <th> 开始时间th>
    127.             <th> 结束时间th>
    128.             <th> 计划用时(时分秒)th>
    129.             <th> 斗口流量(方/秒)th>
    130.             <th> 备注th>
    131.         tr>
    132.         thead>
    133.         <tbody>
    134.         <tr>
    135.             <td> 1td>
    136.             <td> 数据1td>
    137.             <td> 数据2td>
    138.             <td> 数据3td>
    139.             <td> 数据4td>
    140.             <td> 数据5td>
    141.             <td> 数据6td>
    142.             <td> 数据7td>
    143.             <td> 数据8td>
    144.         tr>
    145.         <tr>
    146.             <td> 2td>
    147.             <td> 数据1td>
    148.             <td> 数据2td>
    149.             <td> 数据3td>
    150.             <td> 数据4td>
    151.             <td> 数据5td>
    152.             <td> 数据6td>
    153.             <td> 数据7td>
    154.             <td> 数据8td>
    155.         tr>
    156.         tbody>
    157.         <tfoot>
    158.         <tr>
    159.             <th>合计：th>
    160.             <th>th>
    161.             <th>th>
    162.             <th>th>
    163.             <th>th>
    164.             <th>th>
    165.             <th> 300.00th>
    166.             <th> 300.00th>
    167.             <th> 300.00th>
    168.         tr>
    169.         tfoot>
    170.     table>
    171. div>
    172.  
    173. <div class="foot">
    174.     <div>水管所审核：单打独斗div>
    175.     <div>配水员：李刚div>
    176.     <div>支（渠）长：可div>
    177.     <div>用水单位(签字)：单打独斗div>
    178.  
    179. div>
    180.  
    181.  
    182. <script>
    183.     // 获取当前日期
    184.     var currentDate = new Date();
    185.     var year = currentDate.getFullYear();
    186.     var month = currentDate.getMonth() + 1;
    187.     var day = currentDate.getDate();
    188.  
    189.     // 更新页面上的日期显示
    190.     document.getElementById("currentDate").innerText = year + "年" + month + "月" + day + "日";
    191. script>
    192.  
    193. body>
    194.  
    195. html>

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

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

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

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

    4. ``：设置文档的字符编码为UTF-8，确保正确显示中文等特殊字符。

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

    6. `