使用.NET MAUI Blazor Hybrid时JS打印报错问题求助

问题根源 #

直接修改document.body.innerHTML会破坏Blazor的DOM渲染上下文，虽能避免批次确认报错，但会替换原页面内容；而直接触发打印操作时，Blazor的渲染机制可能因DOM变动或异步操作冲突，抛出Received unexpected acknowledgement for render batch 3错误。

解决方案：隔离打印内容（不修改原页面） #

通过创建新窗口或隐藏iframe加载打印区域内容，既保证原页面不受影响，也不会干扰Blazor的渲染流程。

方案1：新窗口打印（直观易调试）

在wwwroot目录下的JS文件（比如print.js）中添加以下代码：

function printReceipt() {
    const printDiv = document.getElementById("PrintDivision");
    const printWindow = window.open('', '', 'width=800,height=600');
    
    // 写入HTML结构并复制原页面样式，保证打印样式一致
    printWindow.document.write(`
        <html>
        <head>
            <title>收据打印</title>
            ${Array.from(document.querySelectorAll('link[rel="stylesheet"], style')).map(el => el.outerHTML).join('')}
        </head>
        <body>${printDiv.innerHTML}</body>
        </html>
    `);
    printWindow.document.close();

    // 等待内容加载完成后执行打印
    printWindow.onload = () => {
        printWindow.print();
        printWindow.close();
    };
}

方案2：隐藏iframe打印（无弹窗更优雅）

同样在JS文件中添加：

function printReceipt() {
    const printDiv = document.getElementById("PrintDivision");
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    document.body.appendChild(iframe);

    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    iframeDoc.write(`
        <html>
        <head>
            <title>收据打印</title>
            ${Array.from(document.querySelectorAll('link[rel="stylesheet"], style')).map(el => el.outerHTML).join('')}
        </head>
        <body>${printDiv.innerHTML}</body>
        </html>
    `);
    iframeDoc.close();

    iframe.onload = () => {
        iframe.contentWindow.print();
        // 打印完成后清理iframe
        setTimeout(() => document.body.removeChild(iframe), 1000);
    };
}

Blazor组件中调用打印函数 #

在需要打印的组件中注入IJSRuntime并绑定点击事件：

@inject IJSRuntime JS

<button @onclick="TriggerPrint">打印收据</button>

@code {
    private async Task TriggerPrint()
    {
        await JS.InvokeVoidAsync("printReceipt");
    }
}

额外优化建议 #

• 添加打印专属CSS：在页面样式中通过@media print {}定义打印时的字体、边距、隐藏非打印元素等；
• 确保动态内容渲染完成：如果收据内容是异步加载的，需等待数据绑定完成后再调用打印函数。

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