HTML一键打包APK实现打印功能
在网页中,一行 window.print() 就能调起浏览器的打印功能。在HTML一键打包APK工具生成的APP中,这行代码同样有效:工具会拦截 window.print() 调用,并转交给安卓系统打印服务。用户可以直接选择打印机打印,也可以"另存为PDF"把页面保存成PDF文件。
如果你不了解HTML打包APK工具, 想要进一步了解, 可以查看官网:
创建打印页面
在HTML项目入口目录中创建 index.html,写入以下代码。页面展示一张简单的单据,点击"打印"按钮后调用 window.print() 触发打印。通过 @media print 样式,打印时会自动隐藏按钮等屏幕元素,只保留单据内容。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>单据打印</title>
<style>
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
margin: 0;
padding: 20px;
display: grid;
place-items: center;
font-family: 'Microsoft YaHei', sans-serif;
background: #f4f7f5;
color: #17221c;
}
main {
width: min(100%, 440px);
}
.sheet {
padding: 24px;
border: 1px solid #cad4ce;
border-radius: 8px;
background: #fff;
}
h1 {
margin: 0 0 4px;
font-size: 24px;
text-align: center;
}
.sheet-meta {
margin: 0 0 16px;
font-size: 13px;
color: #526159;
text-align: center;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
th,
td {
padding: 8px 6px;
border-bottom: 1px solid #e2e8e4;
text-align: left;
}
th {
background: #eef2f0;
}
.total {
margin-top: 12px;
text-align: right;
font-size: 16px;
font-weight: 700;
}
button {
width: 100%;
min-height: 48px;
margin-top: 14px;
border: 0;
border-radius: 6px;
background: #197447;
color: white;
font: inherit;
font-weight: 700;
}
/* 打印相关样式 */
@media print {
body {
padding: 0;
background: #fff;
}
/* 打印时隐藏按钮,只保留单据 */
.no-print {
display: none;
}
.sheet {
width: 100%;
border: 0;
border-radius: 0;
}
}
</style>
</head>
<body>
<main>
<div class="sheet">
<h1>购物清单</h1>
<p class="sheet-meta">单号:20260824001 日期:2026-08-24</p>
<table>
<thead>
<tr>
<th>品名</th>
<th>数量</th>
<th>金额</th>
</tr>
</thead>
<tbody>
<tr>
<td>无线鼠标</td>
<td>1</td>
<td>79.00</td>
</tr>
<tr>
<td>机械键盘</td>
<td>1</td>
<td>299.00</td>
</tr>
<tr>
<td>USB数据线</td>
<td>2</td>
<td>30.00</td>
</tr>
</tbody>
</table>
<p class="total">合计:408.00 元</p>
</div>
<button class="no-print" type="button" onclick="window.print()">打印</button>
</main>
</body>
</html>代码说明:
点击"打印"按钮执行
window.print(),这是整个打印功能的核心,不需要引入任何第三方库。@media print中定义了打印时的样式,display: none的.no-print元素(按钮等)不会出现在打印内容中。单据表格、金额等内容在屏幕和打印中都会完整保留。
打包APK
打开HTML一键打包APK工具,选择包含 index.html 的项目目录,填写应用名称、包名等打包信息。打印功能依赖安卓系统打印服务,无需额外勾选权限,按默认配置打包即可。

确认配置后开始打包,等待工具生成APK文件。
安装并测试打印
将生成的APK安装到安卓手机,打开APP点击"打印"按钮,系统会弹出打印预览界面。在这里可以:
选择已连接的打印机(云打印机、局域网打印机等)直接打印;
在打印机列表中选择"另存为PDF",把页面保存成PDF文件。
保存的PDF文件可以在手机的"文件"应用或相册中找到,方便发送给客户或存档。
常见问题
点击打印没有反应? 请确认手机系统为Android 5.0及以上,旧系统没有内置打印服务。
列表中找不到打印机? 安卓打印服务需要打印机与手机处于同一网络,或打印机已接入云打印服务。也可以直接使用"另存为PDF",不依赖任何打印机。
打印内容不完整或分页异常? 在 @media print 中适当调整宽度、字号和间距,避免内容超出纸张范围;需要强制分页时,可以在指定元素上添加 page-break-after: always 样式。
扫描二维码推送至手机访问。
版权声明:本文由H5开发工具网站发布,如需转载请注明出处。
如您需要下载软件, 可以点击进入官方软件网址。
本文链接:https://www.h5pack.com/post/html-apk-print-zblog-h5pack.html



