多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

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

HTML5 静默打印:前端页面怎么调用打印机且尽量不弹窗 「html5静默打印」「js调用打印机」这类搜索背后通常是页面已经是 HTML/CSS 排的单据希望点按钮就出纸最好别进浏览器打印预览。HTML5 本身没有「静默访问打印机」的标准 API。能用的是页面技术HTML/CSS做版式再加本机打印通道做出纸。HTML5 能做什么、不能做什么能用 HTML/CSS 控制票据、报表、小票版式响应式布局、表格、条码图、背景色在 Vue / React / 原生 JS 里动态拼字符串再打印不能仅靠浏览器里的 HTML5 API 做到稳定、跨机、无对话框静默出纸用media print代替静默——那只影响「打印预览里长什么样」框还在所以标题里的「HTML5 静默打印」准确说法是HTML5 做版式 本地客户端做静默出纸。推荐接法HTML 字符串直打npminstallweb-print-pdfimportwebPrintPdffromweb-print-pdffunctionbuildTicket(order){return!DOCTYPE html html head meta charsetutf-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 classtitle出库单${order.no}/div div classrow客户${order.customer}/div div classrow数量${order.qty}/div /body /html}exportasyncfunctionprintTicket(order,printerName){consthtmlbuildTicket(order)returnwebPrintPdf.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 打先取 innerHTMLconsthtmldocument.getElementById(print-area).innerHTMLawaitwebPrintPdf.printHtml(!DOCTYPE htmlhtmlheadmeta charsetutf-8 / style/* 把打印用到的 CSS 内联进来 *//style /headbody${html}/body/html,{paperFormat:A4,printBackground:true},{printerName:前台激光})注意外链 CSS、字体、跨域图片在客户端渲染时可能丢。关键样式尽量内联或打进 HTML 字符串。和 window.print 怎么选场景用法偶尔打、允许弹框、不指定机window.printmedia print即可工位连打、指定机、少弹窗HTML 版式 printHtml 本机客户端不要指望给window.print加个 HTML5 属性就变静默——没有这个开关。收束HTML5 负责「单子长什么样」静默负责「纸从哪台机、是否弹窗」。前端把单据做成完整 HTML交给本机打印服务才是搜「html5静默打印 / js调用打印机」时真正能上线的答案。包名搜web-print-pdf。本文不放链接。
返回列表