Electron重构WPF应用：Windows API功能（串口、打印机、双屏）可行性咨询

Hey Shaul, thanks for sharing your context—moving from WPF to Electron to unify on Angular 5 makes total sense, even if cross-platform isn't your main goal. Let's tackle each of your questions head-on:

1. Multiple Printers & Programmatic Printer Selection #

This is totally feasible with Electron's native APIs. Here's how it works:

• First, get a list of all available printers using webContents.getPrinters() (from the main process). This returns an array of printer objects, each with a name property that uniquely identifies the device.
• To print to a specific printer, pass the printer's name to the print() method of your BrowserWindow's webContents. Example snippet:

  // In main process
  const { BrowserWindow } = require('electron');
  const mainWindow = new BrowserWindow();
  
  // Get all printers
  const printers = mainWindow.webContents.getPrinters();
  // Find your target printer (filter by name)
  const targetPrinter = printers.find(p => p.name === 'My Label Printer');
  
  // Print to the specific printer
  mainWindow.webContents.print({
    printerName: targetPrinter.name,
    silent: true // Optional: skip print dialog
  });
  

• For handling multiple printers at once, you can spawn separate print requests for each target device—just make sure to manage each request's context to avoid conflicts.

2. Serial Port Communication #

Electron plays nicely with serial ports thanks to the Node.js ecosystem. The go-to choice is the serialport npm package, which wraps Windows' serial port APIs under the hood. Here's what you need to know:

• Install the package with npm install serialport, then use electron-rebuild to compile the native bindings for your Electron version (critical for Windows compatibility).
• You can enumerate available ports, open connections, and read/write data just like in a regular Node.js app. Example snippet:

  const { SerialPort } = require('serialport');
  
  // List all serial ports
  SerialPort.list().then(ports => {
    ports.forEach(port => console.log(port.path));
  });
  
  // Open a connection and send data
  const port = new SerialPort({ path: 'COM3', baudRate: 9600 });
  port.write('Hello device!\n', (err) => {
    if (err) console.error('Error writing data:', err);
  });
  

This works seamlessly on Windows and doesn't require extra native code unless you have very custom serial needs.

3. Dual Display with Different Content #

Absolutely doable. Electron lets you create multiple BrowserWindow instances, each bound to a specific display. Here's the workflow:

• Use Electron's screen module to get info about all connected displays:

  const { screen } = require('electron');
  const displays = screen.getAllDisplays();
  // displays[0] = main display, displays[1] = secondary display (adjust based on your setup)
  

• Create a separate BrowserWindow for each display, setting its position and size to match the display's bounds:

  // Window for main display
  const mainWindow = new BrowserWindow({
    x: displays[0].bounds.x,
    y: displays[0].bounds.y,
    width: displays[0].bounds.width,
    height: displays[0].bounds.height,
    webPreferences: { contextIsolation: true } // Adjust based on your Angular security setup
  });
  mainWindow.loadURL('http://localhost:4200/main-content');
  
  // Window for secondary display
  const secondaryWindow = new BrowserWindow({
    x: displays[1].bounds.x,
    y: displays[1].bounds.y,
    width: displays[1].bounds.width,
    height: displays[1].bounds.height,
    webPreferences: { contextIsolation: true }
  });
  secondaryWindow.loadURL('http://localhost:4200/secondary-content');
  

Each window can load a different Angular route or component, so users see distinct content on each monitor.

Using .NET/C++ to Call Windows APIs: User Experience #

If you choose to wrap Windows API calls in a .NET/C++ helper app or library, users will not notice any difference—as long as you handle the integration smoothly. Here are a few solid approaches:

• Child Process: Use Electron's child_process module to spawn your .NET/C++ executable, passing data via stdin/stdout or command-line arguments. This is straightforward and keeps your Electron app clean.
• IPC: Create a lightweight .NET/C++ background service that communicates with Electron via Windows named pipes or local HTTP. This is great for long-running connections (like serial port or printer management).
• Node.js Addon: Wrap your C++ code into a Node.js addon that Electron can import directly. This is the most tightly integrated option but requires more C++ expertise.

In all cases, the user won't see extra windows or prompts unless you explicitly add them—your Angular frontend will still feel like a single, cohesive app.

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