HTML5 静默打印：前端页面怎么调用打印机且尽量不弹窗

「html5静默打印」「js调用打印机」这类搜索，背后通常是：页面已经是 HTML/CSS 排的单据，希望点按钮就出纸，最好别进浏览器打印预览。

HTML5 本身没有「静默访问打印机」的标准 API。能用的是页面技术（HTML/CSS）做版式，再加本机打印通道做出纸。

HTML5 能做什么、不能做什么

能：

用 HTML/CSS 控制票据、报表、小票版式
响应式布局、表格、条码图、背景色
在 Vue / React / 原生 JS 里动态拼字符串再打印

不能：

仅靠浏览器里的 HTML5 API 做到稳定、跨机、无对话框静默出纸
用 @media print 代替静默------那只影响「打印预览里长什么样」，框还在

所以标题里的「HTML5 静默打印」，准确说法是：HTML5 做版式 + 本地客户端做静默出纸。

推荐接法：HTML 字符串直打

bash 复制代码

npm install web-print-pdf

js 复制代码

import webPrintPdf from 'web-print-pdf'

function buildTicket(order) {
  return `
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <style>
        html, body { margin: 0; padding: 0; font-family: sans-serif; }
        .title { font-size: 16px; font-weight: bold; }
        .row { margin: 4px 0; font-size: 12px; }
      </style>
    </head>
    <body>
      <div class="title">出库单 ${order.no}</div>
      <div class="row">客户：${order.customer}</div>
      <div class="row">数量：${order.qty}</div>
    </body>
    </html>
  `
}

export async function printTicket(order, printerName) {
  const html = buildTicket(order)
  return webPrintPdf.printHtml(
    html,
    {
      paperFormat: 'A4',
      printBackground: true,
      margin: { top: '8mm', bottom: '8mm', left: '10mm', right: '10mm' },
    },
    { printerName, copies: 1 },
    { action: 'print' } // 联调改 preview
  )
}

热敏 80mm 小票时，把 paperFormat 换成宽度参数，例如 width: '80mm'，并保证 html, body { margin:0; padding:0; }，减少空白页。

从页面 DOM 打：先取 innerHTML

js 复制代码

const html = document.getElementById('print-area').innerHTML
await webPrintPdf.printHtml(
  `<!DOCTYPE html><html><head><meta charset="utf-8" />
   <style>/* 把打印用到的 CSS 内联进来 */</style>
   </head><body>${html}</body></html>`,
  { paperFormat: 'A4', printBackground: true },
  { printerName: '前台激光' }
)

注意：外链 CSS、字体、跨域图片在客户端渲染时可能丢。关键样式尽量内联或打进 HTML 字符串。

和 window.print 怎么选

场景	用法
偶尔打、允许弹框、不指定机	`window.print` + `@media print` 即可
工位连打、指定机、少弹窗	HTML 版式 + `printHtml` + 本机客户端

不要指望给 window.print 加个 HTML5 属性就变静默------没有这个开关。

收束

HTML5 负责「单子长什么样」，静默负责「纸从哪台机、是否弹窗」。前端把单据做成完整 HTML，交给本机打印服务，才是搜「html5静默打印 / js调用打印机」时真正能上线的答案。

包名搜 web-print-pdf。本文不放链接。