如何打印包含图片的DIV内容？现有代码遗漏图片求解决

问题原因 #

你的代码直接替换document.body.innerHTML后立即调用window.print()，此时DIV内的图片可能还未完成加载，导致打印时无法显示；另外这种替换方式可能丢失页面原有样式或图片的正确路径上下文。

解决方案 #

方案1：等待图片加载完成后再打印 #

修改代码，先替换内容，然后监听所有图片的加载状态，全部加载完成后再触发打印：

function printDiv(impresion) {
    var contenido = document.getElementById(impresion).innerHTML;
    var contenidoOriginal = document.body.innerHTML;

    document.body.innerHTML = contenido;

    // 获取页面所有图片元素
    const images = document.querySelectorAll('img');
    let loadedCount = 0;

    // 若没有图片，直接打印
    if (images.length === 0) {
        window.print();
        document.body.innerHTML = contenidoOriginal;
        return;
    }

    // 监听每个图片加载完成
    images.forEach(img => {
        // 图片已加载完成的情况
        if (img.complete) {
            loadedCount++;
            checkAllLoaded();
        } else {
            img.addEventListener('load', () => {
                loadedCount++;
                checkAllLoaded();
            });
            // 处理图片加载失败的情况
            img.addEventListener('error', () => {
                loadedCount++;
                checkAllLoaded();
            });
        }
    });

    function checkAllLoaded() {
        if (loadedCount === images.length) {
            window.print();
            document.body.innerHTML = contenidoOriginal;
        }
    }
}

方案2：使用隐藏iframe打印（更稳定） #

不替换body内容，而是创建一个隐藏的iframe，将目标DIV的内容放入iframe中，再打印iframe，这样不会影响原页面的内容和样式上下文：

function printDiv(impresion) {
    const targetDiv = document.getElementById(impresion);
    // 创建iframe元素
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    document.body.appendChild(iframe);

    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    // 复制原页面的head样式到iframe，保证样式一致
    iframeDoc.head.innerHTML = document.head.innerHTML;
    // 放入目标DIV的内容
    iframeDoc.body.innerHTML = targetDiv.innerHTML;

    // 等待iframe内资源加载完成
    iframe.onload = function() {
        iframe.contentWindow.print();
        // 打印完成后移除iframe
        setTimeout(() => {
            document.body.removeChild(iframe);
        }, 500);
    };
}

方案3：检查打印样式 #

确保CSS中没有设置打印时隐藏图片的规则，可添加如下打印样式保证图片显示：

@media print {
    img {
        display: block !important; /* 强制打印时显示图片 */
        max-width: 100%; /* 防止图片超出打印页面范围 */
    }
}

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