用纯HTML写一个凭证并打印

news/发布时间2024/5/14 15:13:34

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