当前位置：首页 > article >正文

前端 window.print() 打印图片

article 2025/3/1 9:54:56

在使用 document.write 时，确保内容加载完成后再执行其他操作（如 print），可以通过以下方法实现：

1. 使用 `window.onload` 事件

window.onload 事件会在页面所有资源（包括图片、脚本等）加载完成后触发。

javascript

复制

window.onload = function() {
    document.write("页面已加载完成");
    window.print(); // 确保内容加载完成后再打印
};

2. 使用 `DOMContentLoaded` 事件

DOMContentLoaded 事件在 HTML 文档完全加载和解析后触发，无需等待图片等资源。

javascript

复制

document.addEventListener("DOMContentLoaded", function() {
    document.write("DOM 已加载完成");
    window.print(); // 确保 DOM 加载完成后再打印
});

3. 使用 `setTimeout` 延迟

如果内容动态生成，可以使用 setTimeout 延迟打印。

javascript

复制

document.write("动态内容");
setTimeout(function() {
    window.print(); // 延迟确保内容写入完成
}, 1000); // 延迟 1 秒

4. 使用 `MutationObserver` 监听 DOM 变化

如果内容异步加载，可以使用 MutationObserver 监听 DOM 变化。

javascript

复制

const targetNode = document.body;
const config = { childList: true, subtree: true };

const callback = function(mutationsList, observer) {
    for (let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            window.print(); // 确保内容加载完成后再打印
            observer.disconnect(); // 停止监听
        }
    }
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

document.write("异步内容");