Electron结合Laravel与热敏打印机打印时出现水平空白区域问题

问题描述 #

使用Electron应用结合Laravel生成账单，通过热敏打印机打印时，账单存在水平方向空白区域（红框标注），但直接在浏览器中用Ctrl+P打印同一页面显示完全正常。

已尝试调整dpi、pageSize、margins等参数，均未解决问题。

打印实现代码 #

const { BrowserWindow } = require('@electron/remote');
const options = {
    silent: true,
    printBackground: true,
    color: false,
    margins: {
        marginType: 'none'
    },
    landscape: false,
    pagesPerSheet: 1,
    collate: false,
    copies: 1,
    header: 'bill',
    footer: 'bill',
};

const win = new BrowserWindow({
    show: false,
    webPreferences: {
        nodeIntegration: true,
        contextIsolation: false
    }
});
const print = '{{ route('sale-invoice.bill', 'id') }}';
const url = print.replace('id', id);

win.loadURL(url);
win.webContents.on('did-finish-load', () => {
    win.webContents.print({}, (success, failureReason) => {
        if (!success) {
            showAlert('error', 'Error Occurred', failureReason);
        }
    });
});

解决方案 #

1. 强制指定热敏纸专属打印尺寸 #

Electron默认打印尺寸为标准纸张，和热敏纸不匹配是常见原因。在打印配置中手动指定对应纸宽（单位为Electron内部的1/72英寸，1mm=254单位）：

const options = {
    silent: true,
    printBackground: true,
    color: false,
    margins: {
        marginType: 'none'
    },
    landscape: false,
    pagesPerSheet: 1,
    collate: false,
    copies: 1,
    header: '', // 清空页眉页脚，避免额外空白
    footer: '',
    pageSize: {
        width: 20320, // 对应80mm宽热敏纸，58mm纸填14732
        height: 0 // 高度设为0让内容自动延伸
    }
};

2. 页面CSS强制适配热敏纸宽度 #

在Laravel账单页面的打印样式中，限制页面最大宽度为热敏纸宽度，同时清除默认边距：

@media print {
    body {
        width: 80mm; /* 和打印机纸宽一致 */
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
    }
    /* 确保所有元素不超出页面宽度 */
    .bill-container {
        width: 100% !important;
        max-width: 100% !important;
    }
}

同时在HTML头部添加视图适配标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

3. 调整BrowserWindow渲染尺寸匹配打印内容 #

创建隐藏窗口时，设置宽度为热敏纸对应的像素宽度（按96dpi计算，80mm≈283px），让页面渲染时就贴合打印尺寸：

const win = new BrowserWindow({
    show: false,
    width: 283, // 80mm热敏纸对应像素宽度
    height: 600,
    webPreferences: {
        nodeIntegration: true,
        contextIsolation: false
    }
});

4. 先转PDF再打印（备选方案） #

如果直接打印仍有问题，可先将页面转为PDF再打印，格式控制更稳定：

win.webContents.on('did-finish-load', () => {
    win.webContents.printToPDF({
        marginsType: 1,
        pageSize: { width: 20320, height: 0 },
        printBackground: true
    }).then(data => {
        // 这里可调用系统打印命令处理PDF，例如用child_process
        const { exec } = require('child_process');
        exec(`lp -d "你的打印机名称" bill.pdf`, (error) => {
            if (error) showAlert('error', '打印失败', error.message);
        });
    }).catch(error => {
        showAlert('error', '生成PDF失败', error.message);
    });
});

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