Angular应用调用iframe打印在Android设备内容空白的解决方案问询

你的现有逻辑存在3个Android适配遗漏点，修改后即可兼容，无需引入第三方包：

• 打印触发时机过早：Angular挂载Portal、注入样式表都是异步渲染操作，Android WebView的渲染调度优先级低于桌面端/ iOS，你直接在挂载后同步调用print()时，iframe内的DOM和样式还没完成渲染，就会输出空白页。
• 样式注入逻辑存在bug：_getStyleSheetElement方法遍历所有样式link标签时，每次匹配到样式表都会覆盖同一个link元素的属性，最终只会返回最后一个样式表，缺失的样式可能导致内容被判定为不可见。
• 未适配iframe可打印判定规则：部分Android浏览器会默认将尺寸为0、或者脱离文档流的不可见iframe内的内容判定为非打印内容，直接过滤。

修复步骤 #

1. 调整iframe基础样式

给iframe设置固定的A4尺寸，移出可视区域但保留可打印属性：

<iframe #iframe style="position: absolute; left: -9999px; top: 0; width: 210mm; height: 297mm; border: none;"></iframe>

2. 修复样式注入逻辑

调整为加载所有外部样式表，且等待样式加载完成后再执行后续操作：

private _getStyleSheetElements(): HTMLLinkElement[] {
    const styleSheets: HTMLLinkElement[] = [];
    document.querySelectorAll('link').forEach((htmlElement) => {
        if (htmlElement.rel === 'stylesheet') {
            const styleSheetElement = document.createElement('link');
            const absoluteUrl = new URL(htmlElement.href).href;
            styleSheetElement.rel = 'stylesheet';
            styleSheetElement.type = 'text/css';
            styleSheetElement.href = absoluteUrl;
            styleSheets.push(styleSheetElement);
        }
    });
    return styleSheets;
}

private _attachStyles(targetWindow: Window): Promise<void> {
    return new Promise((resolve) => {
        // 复制父窗口的内联样式
        document.querySelectorAll('style').forEach((htmlElement) => {
            targetWindow.document.head.appendChild(htmlElement.cloneNode(true));
        });
        // 复制所有外部样式表
        const styleSheetElements = this._getStyleSheetElements();
        let loadedCount = 0;
        if (styleSheetElements.length === 0) {
            resolve();
            return;
        }
        styleSheetElements.forEach(link => {
            const loadHandler = () => {
                loadedCount++;
                if (loadedCount === styleSheetElements.length) resolve();
            };
            link.onload = loadHandler;
            link.onerror = loadHandler;
            targetWindow.document.head.appendChild(link);
        });
    });
}

3. 调整打印触发时机

等样式加载完成、浏览器完成两轮渲染后再触发打印：

public async printButton(printMode: string): Promise<void> {
    let printTemplate;
    if (printMode === '#printThat') {
        await this.getAllRacesForPrint()
        printTemplate = this.printAll;
    } else if (printMode === '#printThis') {
        printTemplate = this.printSingleRace;
    }
    const iframe = this.iframe.nativeElement;
    // 清空旧内容避免缓存干扰
    iframe.contentDocument.body.innerHTML = '';
    this.portalHost = new DomPortalOutlet(
        iframe.contentDocument.body,
        this.componentFactoryResolver,
        this.appRef,
        this.injector
    );

    const portal = new TemplatePortal(
        printTemplate,
        this.viewContainerRef
    );

    this.portalHost.attach(portal);
    iframe.contentWindow.onafterprint = () => {
        iframe.contentDocument.body.innerHTML = '';
        this.portalHost.detach();
    };

    // 等待所有样式加载完成
    await this._attachStyles(iframe.contentWindow);
    // 等待两轮渲染周期，确保Android WebView完成内容绘制
    await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));

    iframe.contentWindow.print();
}

如果仍有极个别设备出现空白，可以把iframe方案替换为在body底部临时挂载Portal的DOM节点，打印完成后再移除，兼容性会更强。

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