最近有个需求，需要通过网页把单子打印出来，就用html实现了一个，主要使用了windwos自带的print打印，全部代码如下：
html
<!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>以下是代码中每行的作用解释：
-
`<!DOCTYPE html>`：声明文档类型为HTML5，告诉浏览器以HTML5标准解析页面
-
`<html>`：HTML文档的根元素，包含整个HTML内容。
-
`<head>`：包含了文档的元数据，如标题、样式表和脚本等信息。
-
`<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>`：设置文档的字符编码为UTF-8，确保正确显示中文等特殊字符。
-
`<title>配水单</title>`：设置页面的标题为"配水单"。
-
`<style type="text/css" media="all">`：开始定义内联CSS样式。
-
`* { margin: 0; padding: 0; font-size: 12px }`：设置全局样式，将所有元素的外边距、内边距和字体大小设为12像素。
-
`table { ... }`：定义表格的样式，包括宽度、边框等。
-
`th, td { ... }`：定义表头和单元格的样式，包括边框和内边距。
-
`h1 { font-size: 24px }`：设置h1标题的字体大小为24像素。
-
`@media print { ... }`：定义在打印模式下的样式，这里设置了`.no-print`类在打印时不显示。
-
`.headStyle { ... }`、`.headTitleLift { ... }`、`.title { ... }`等：定义了一些自定义样式，用于配水单头部和表格的布局。
-
`<body>`：包含了页面的主体内容。
-
`<div class="no-print" ...>`：一个不打印的div，包含了打印按钮，点击该按钮可以触发打印功能。
-
`<h1>`：页面标题，显示"甘肃省引大秦工程管理配水单"。
-
`<p>`：段落元素，显示日期信息。
-
`<div class="headStyle">`：头部样式的div容器，包含水单位、供水渠系等信息。
-
`<div class="table-box">`：表格容器，包含了配水表格。
-
`<div class="foot">`：页脚容器，包含了审核和签字信息。
-
`<script>`：JavaScript脚本部分，用于获取当前日期并更新页面上的日期显示。
-
`// 获取当前日期`：注释，解释下面代码的作用。
-
`var currentDate = new Date();`：创建一个Date对象，表示当前日期和时间。
-
`var year = currentDate.getFullYear();`、`var month = currentDate.getMonth() + 1;`、`var day = currentDate.getDate();`：分别获取当前日期的年、月、日。
-
`document.getElementById("currentDate").innerText = year + "年" + month + "月" + day + "日";`：将获取的年月日信息更新到页面上id为"currentDate"的span元素中，显示当前日期。
-
`</body>`：HTML文档的body结束标签。
-
`</html>`：HTML文档的结束标签。
具体效果
