当前位置:首页 > 打包APK > 正文内容

HTML一键打包APK实现打印功能

在网页中,一行 window.print() 就能调起浏览器的打印功能。在HTML一键打包APK工具生成的APP中,这行代码同样有效:工具会拦截 window.print() 调用,并转交给安卓系统打印服务。用户可以直接选择打印机打印,也可以"另存为PDF"把页面保存成PDF文件。

如果你不了解HTML打包APK工具, 想要进一步了解, 可以查看官网:

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文件。

安装并测试打印

将生成的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

返回列表

上一篇:HTML打包APK实现视频全屏播放教程

没有最新的文章了...