技术问询：如何使用Angular向无线打印机发送指令实现页面打印？

Hey there! I’ve helped a few folks tackle printing from Angular to wireless printers, so let’s walk through the best approaches here:

一、最通用的方案：借助浏览器原生打印API #

这是最省心的方式——只要用户的设备已经配对好无线打印机，浏览器就能识别并提供打印选项。在Angular里实现起来也很简单：

步骤1：封装打印逻辑 #

可以单独做一个打印组件，或者在现有组件里添加打印功能，核心是用window.print()触发系统打印对话框，同时可以指定要打印的特定DOM内容：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-order-print',
  template: `
    <!-- 页面正常内容 -->
    <div class="normal-content">
      <h2>订单详情</h2>
      <!-- ...其他页面元素 -->
      <button (click)="startPrint()">打印订单</button>
    </div>

    <!-- 专门用于打印的内容 -->
    <div #printSection class="print-only">
      <h1>XX商城订单</h1>
      <p>订单号: 20240520001</p>
      <p>商品: Angular开发实战手册</p>
      <p>总价: ¥89.00</p>
    </div>
  `,
  styles: [`
    .print-only { display: none; }
    @media print {
      .normal-content { display: none; }
      .print-only { 
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
      }
    }
  `]
})
export class OrderPrintComponent {
  @ViewChild('printSection') printSection!: ElementRef;

  startPrint() {
    // 用@media print的方式控制打印内容更简洁
    window.print();
  }
}

为什么好用？ #

• 不需要额外依赖，兼容绝大多数浏览器
• 无线打印机只要在设备上完成配对，就会出现在打印对话框的选项里
• 通过@media print可以轻松控制打印样式，避免页面元素干扰

二、进阶：跳过对话框直接打印（仅限特定场景） #

如果业务需求是自动选择打印机、跳过浏览器的打印对话框，那得注意：浏览器出于安全限制，默认不允许直接访问系统打印机。但有几种可行的场景：

1. Chrome/Edge浏览器的专属API #

Chrome和Edge提供了chrome.printingAPI，能直接和系统打印机交互，但需要满足两个条件：

• 你的应用运行在Chrome/Edge环境下
• 用户授予了打印权限

示例代码：

// 先获取所有可用打印机（包括无线的）
async getAvailablePrinters() {
  if (!(window as any).chrome?.printing) {
    console.error('该API仅支持Chrome/Edge浏览器');
    return [];
  }
  const printers = await (window as any).chrome.printing.getPrinters();
  // 过滤出无线打印机（可以通过printer.name或uri判断）
  return printers.filter(p => p.name.includes('Wireless') || p.uri.startsWith('ipp://'));
}

// 向指定打印机发送打印任务
async sendPrintToPrinter(printerId: string) {
  try {
    const printJob = await (window as any).chrome.printing.print({
      printerId: printerId,
      ticket: {
        // 配置打印参数：纸张大小、黑白/彩色、份数等
        mediaSize: { widthMicrons: 210000, heightMicrons: 297000 }, // A4
        copies: { count: 1 }
      },
      document: { url: window.location.href } // 可以指定要打印的页面URL
    });
    console.log('打印任务已提交，任务ID:', printJob.jobId);
  } catch (err) {
    console.error('打印失败:', err);
  }
}

2. Electron打包的桌面应用 #

如果你的Angular应用是用Electron打包成桌面App，那么可以直接调用Node.js的打印模块，或者Electron自带的webContents.print()方法，能更灵活地控制打印机。

三、关键注意事项 #

• 确保无线打印机已经和用户的设备（电脑/手机）成功配对，并且处于在线状态
• 移动端Angular应用的打印功能依赖系统打印服务，同样需要设备先连接好打印机
• 打印样式一定要用@media print单独调试，避免页面的导航栏、按钮等无关元素被打印出来

内容的提问来源于stack exchange，提问作者raman0369