纯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拼接的方式拼成一张发票，有其他思路的欢迎留言交流
797
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
