纯HTML版(table标签实现)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>发票预览</title>
</head>
<body>
<!--使用table自定义画发票-->
<table style="border-collapse: collapse;width: 1200px">
<tr>
<td style="width: 300px"></td>
<td style="width: 600px;text-align: center">
<h1>电子发票(普通发票)</h1>
<p class="un_line"></p>
<p style="opacity: 0;">——————————————————————</p>
</td>
<td style="width: 300px;">
<div>
<span>发票号码:</span><span>123412341234</span>
</div>
<br>
<div>
<span>发票日期:</span><span>2024年07月11日</span>
</div>
</td>
</tr>
</table>
<table style="border-collapse: collapse;width: 1200px">
<tr>
<!-- 表格第二行,购买方信息,发票抬头,销售方信息等等-->
<td style="border: 1px solid;width: 20px">购买方信息</td>
<td style="border: 1px solid;width: 450px">
<span>名称:自动化</span>
<br>
<br>
<br>
<span>统一社会信用代码/纳税人识别号:</span>
</td>
<td style="border: 1px solid;width: 20px">销售方信息</td>
<td style="border: 1px solid;width: 450px">
<span>名称:自动化</span>
<br>
<br>
<br>
<span>统一社会信用代码/纳税人识别号:</span>
</td>
</tr>
</table>
<!-- 第二个表格,费用详细信息,项目名称,单位,数量,单价,金额等等-->
<table style="border-collapse: collapse;border: 1px solid;width: 1200px">
<tr>
<!-- 表格第三行,费用详细信息,项目名称,单位,数量,单价,金额等等,是一个表内表格-->
<td style="width: 300px;padding-left:40px;">项目名称</td>
<td style="width: 300px">规格型号</td>
<td style="width: 125px">单 位</td>
<td style="width: 125px">数 量</td>
<td style="width: 125px">单 价</td>
<td style="width: 125px">金 额</td>
<td style="width: 125px">税率/征收率</td>
<td style="width: 125px">税 额</td>
</tr>
<!-- fixme 循环这个td,做数据表示-->
<tr>
<!-- 表格第三行,费用详细信息,项目名称,单位,数量,单价,金额等等,是一个表内表格-->
<td style="width: 300px;word-wrap:break-word;">*软件*通信设备嵌入式软件(13%)</td>
<td style="width: 300px;word-wrap:break-word;">20240601-202406</td>
<td style="width: 125px">元</td>
<td style="width: 125px">1</td>
<td style="width: 125px">888.5</td>
<td style="width: 125px">888.5</td>
<td style="width: 125px">13%</td>
<td style="width: 125px">115.5</td>
</tr>
<tr style="height: 200px;"></tr>
<tr>
<td style="width: 300px;padding-left:80px;word-wrap:break-word;">合 计</td>
<td style="width: 300px;word-wrap:break-word;"></td>
<td style="width: 125px"></td>
<td style="width: 125px"></td>
<td style="width: 125px"></td>
<td style="width: 125px">8888.8</td>
<td style="width: 125px"></td>
<td style="width: 125px">115.5</td>
</tr>
</table>
<table style="border-collapse: collapse;border: 1px solid;width: 1200px">
<tr>
<td style="width: 300px;padding-left:40px;border: 1px solid;">价税合计(大写)</td>
<td style="width: 900px">
<p style="width: 600px;display: inline-block;">⊗ 壹仟零肆圆整</p>
<p style="display: inline-block">(小写)¥1004</p>
</td>
</tr>
</table>
<table style="border-collapse: collapse;border: 1px solid;width: 1200px">
<tr>
<td style="width: 20px;border: 1px solid;">备注</td>
<td>备注内容备注内容备注内容备注内容备注内容备注内容</td>
</tr>
</table>
<span style="padding-left: 40px">开票人:xxx</span>
<style>
.container {
display: inline-grid;
grid-template-columns: 1fr 1fr 1fr;
}
.box {
border: 1px solid;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
.un_line{ width:100%; height:5px; border-top:2px solid; border-bottom:2px solid;}
</style>
</body>
</html>
测试截图
全部源码贡献出来了,直接执行按需修改,主要是提供思路,发票是一张不规则的表格,我这里采用table拼接的方式拼成一张发票,有其他思路的欢迎留言交流