如何在MVC应用中通过QZ Tray直接向多台打印机打印HTML页面

问题描述 #

• 需求：
  1. 在MVC Web应用中，指定打印机后，通过JS直接将已生成的HTML页面同时打印到多台打印机
  2. 当前故障：打印机仅输出顶部带文件名标题的空白纸张

用户提供的测试代码：

@{ Layout = null;}

<div>Print test Print test Print test Print test Print test Print test</div>

<script src="~/Scripts/jquery-3.5.1.min.js"></script>

<script src="~/Scripts/qz-tray.js"></script>

<script>
    $(document).ready(function (){
        qz.websocket.connect({ retries: 5, delay: 1 }).then(function () {
            return qz.printers.find("hp", { margins: 2, orientation: 'portrait' });              // Pass the printer name into the next Promise
        }).then(function (printer) {
            var config = qz.configs.create(printer, { scaleContent: false });       // Create a default config for the found printer
            var data = [{
                type: 'pixel',
                format: 'html',
                flavor: 'plain', // or 'plain' if the data is raw HTML
                data: 'http://localhost:27210/Home/View1',
                options: { pageWidth: 8.5 /* pageHeight: 11 */ }
            }]; return qz.print(config, data);
        }).catch(function (e) { console.error(e); });
    })
</script>

问题分析与修复方案 #

核心问题点 #

1. 打印类型不匹配：使用type: 'pixel'搭配HTML格式是错误的，pixel类型用于位图打印，无法正确解析HTML内容
2. 参数配置错误：flavor: 'plain'仅适用于原始HTML字符串，当data为URL时需使用默认的url flavor
3. 内容缩放关闭：scaleContent: false会导致HTML内容无法适配纸张尺寸，直接超出打印区域
4. 多打印机逻辑缺失：原代码仅处理单台打印机，未实现多设备同时打印的需求

修复后的代码示例 #

@{ Layout = null;}

<div>Print test Print test Print test Print test Print test Print test</div>

<script src="~/Scripts/jquery-3.5.1.min.js"></script>
<script src="~/Scripts/qz-tray.js"></script>

<script>
$(document).ready(function (){
    // 定义需要打印的多台打印机名称列表
    const targetPrinters = ["hp", "epson", "canon"];

    qz.websocket.connect({ retries: 5, delay: 1 })
    .then(() => {
        // 批量查找所有目标打印机
        return Promise.all(targetPrinters.map(printerName => qz.printers.find(printerName)));
    })
    .then(printers => {
        // 过滤掉未找到的打印机
        const validPrinters = printers.filter(p => p !== null);
        if(validPrinters.length === 0) {
            console.error("未找到任何指定的打印机");
            return;
        }

        // 为每台有效打印机创建并执行打印任务
        const printTasks = validPrinters.map(printer => {
            // 创建适配HTML打印的配置
            const printConfig = qz.configs.create(printer, {
                scaleContent: true, // 开启内容缩放适配纸张
                margins: 0, // 根据实际需求调整边距
                orientation: 'portrait'
            });

            // 正确配置HTML打印参数
            const printData = [{
                type: 'html', // 明确指定打印类型为HTML
                data: 'http://localhost:27210/Home/View1', // 目标HTML页面URL
                options: { 
                    pageWidth: 8.5, 
                    pageHeight: 11,
                    background: true // 可选：开启背景样式打印
                }
            }];

            return qz.print(printConfig, printData);
        });

        // 并行执行所有打印任务
        return Promise.all(printTasks);
    })
    .catch(error => { console.error(error); });
})
</script>

关键修复说明 #

• 修正打印类型为html，让QZ Tray正确解析URL对应的HTML页面
• 移除多余的flavor: 'plain'参数，默认适配URL类型的数据源
• 开启scaleContent: true确保HTML内容自动适配纸张尺寸，避免空白问题
• 通过Promise.all实现多打印机的批量查找和并行打印，满足多设备同时打印需求
• 添加打印机有效性过滤，避免因未找到打印机导致的任务失败

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