前端 window.print() 打印图片
等待所有资源加载完成。:等待 DOM 加载完成。setTimeout:延迟执行打印。:监听 DOM 变化,确保内容加载完成。
·
在使用 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("异步内容");
总结
-
window.onload:等待所有资源加载完成。 -
DOMContentLoaded:等待 DOM 加载完成。 -
setTimeout:延迟执行打印。 -
MutationObserver:监听 DOM 变化,确保内容加载完成。
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)