Electron应用4R尺寸照片静默打印问题：自定义纸张尺寸不生效始终为A4

阿华AIGC实验室

2026-3-31

我完全明白你遇到的这个头疼问题——明明指定了4R（4x6英寸）的纸张尺寸，但Electron的webContents.print()就是顽固地用A4，导致照片只打了一半，还要实现完全静默的打印流程不让用户看到弹窗。我帮你梳理下核心问题和可行的解决办法：

核心问题分析

你代码里的两个关键疏漏导致了这个问题：

pageSize参数单位错误：Electron自定义纸张尺寸的width和height单位是百分之一英寸，但你写的101600和152400是微米单位，Electron无法识别，直接 fallback 到系统打印机的默认A4尺寸。
打印模板与Electron配置的优先级不匹配：虽然你在HTML里写了@page样式，但没有和Electron的打印配置形成强绑定，容易被系统打印机的默认设置覆盖。

分步解决方案

1. 优化HTML打印模板样式（确保100%匹配4R尺寸）

强化打印样式的优先级，防止浏览器或打印机的默认样式干扰：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <style>
    /* 基础样式：严格匹配4R竖版尺寸 */
    html, body {
      margin: 0;
      padding: 0;
      width: 4in;
      height: 6in;
      overflow: hidden;
      background: white;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    /* 打印专属样式：强制最高优先级 */
    @media print {
      @page {
        size: 4in 6in !important;
        margin: 0 !important;
      }

      html, body {
        width: 4in !important;
        height: 6in !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
      }

      img {
        page-break-inside: avoid; /* 防止图片被分页截断 */
      }
    }
  </style>
</head>
<body>
  <img id="photo" />

  <script>
    const params = new URLSearchParams(location.search);
    const img = document.getElementById("photo");

    img.src = params.get("src");

    // 图片加载完成后标记为可打印
    img.onload = () => {
      window.printReady = true;
    };

    // 容错处理：图片加载失败也终止等待，避免无限挂起
    img.onerror = () => {
      console.error("Failed to load print photo");
      window.printReady = true;
    };
  </script>
</body>
</html>

2. 修正Electron打印函数配置

重点修复pageSize单位错误，同时优化静默打印的窗口设置：

import { BrowserWindow } from 'electron';
import path from 'path';
import fs from 'fs';

export async function printPhoto({
  sessionPath,
  printerName,
}: {
  sessionPath: string;
  printerName: string;
}) {
  const photoPath = path.join(sessionPath, "photo_print.jpg");

  if (!fs.existsSync(photoPath)) {
    throw new Error("photo_print.jpg not found");
  }

  // 静默打印不需要显示窗口，设为false避免闪现
  const win = new BrowserWindow({
    width: 600,
    height: 900,
    show: false,
    frame: false,
    webPreferences: {
      contextIsolation: true,
      nodeIntegration: false,
    },
  });

  const templatePath = path.join(
    process.env.VITE_PUBLIC!,
    "print-templates",
    "print-4r.html"
  );

  await win.loadFile(templatePath, {
    query: {
      src: `file://${photoPath}`,
    },
  });

  // 等待打印模板完全准备就绪
  await win.webContents.executeJavaScript(`
    new Promise(resolve => {
      const checkReady = () => {
        if (window.printReady) resolve();
        else setTimeout(checkReady, 50);
      };
      checkReady();
    });
  `);

  try {
    const printSuccess = await win.webContents.print({
      silent: true,
      printBackground: true,
      deviceName: printerName,
      margins: { marginType: "none" },
      // 自定义4R尺寸：单位为百分之一英寸（4英寸=400，6英寸=600）
      pageSize: {
        name: "Custom",
        width: 400,
        height: 600,
      },
      // 强制使用HTML中的打印样式表
      useStyleSheet: true,
    });

    if (!printSuccess) {
      throw new Error("Print operation failed");
    }
  } catch (error) {
    throw new Error(`Print error: ${(error as Error).message}`);
  } finally {
    // 无论成功失败都销毁窗口，释放资源
    win.destroy();
  }
}

3. 系统打印机预配置（关键！）

很多打印机默认不识别自定义纸张尺寸，需要先在系统中提前配置：

Windows：打开「打印机和扫描仪」→ 选择目标打印机 → 「管理」→ 「打印机属性」→ 「设备设置」→ 添加自定义纸张尺寸（4x6英寸），并设置为该打印机的默认纸张。
macOS：打开「系统设置」→ 「打印机与扫描仪」→ 选择目标打印机 → 「选项与耗材」→ 「纸张」→ 添加自定义尺寸（4x6英寸），设为默认。