监听DOM以处理前端浏览器打印预览延时
【摘要】 1 背景如果需要在浏览器特别时chrome使用打印控件，这将可能需要获取后端服务的数据，比如该次打印的次数或者单号，这里汇集了三条方法处理后端数据返回和浏览器打印预览加载时机同步的问题。setTimeout 的情况下确保数据加载后再调用 window.print()，可以利用 MutationObserver 或 Promise 处理数据更新和 DOM 渲染无法完成的问题。使用js的异步字...
1 背景
如果需要在浏览器特别时chrome使用打印控件，这将可能需要获取后端服务的数据，比如该次打印的次数或者单号，这里举例监听DOM方法处理后端数据返回和浏览器打印预览加载时机同步的问题。
setTimeout 的情况下确保数据加载后再调用 window.print()，可以利用 MutationObserver 或 Promise 处理数据更新和 DOM 渲染无法完成的问题。
使用js的异步字段匹配。
2 监听 DOM 变化
使用 MutationObserver 监听 DOM 变化
MutationObserver 监听 #cardNumber 的内容更新，确保数据加载后才触发 window.print()。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打印示例</title>
</head>
<body>
<h1>订单打印</h1>
<p>单号: <span id="cardNumber">加载中...</span></p>
<script>
async function fetchCardNumber() {
try {
const response = await fetch('/user/card_info');
const data = await response.json();
if (data && data.card_number) {
document.getElementById('cardNumber').textContent = data.card_number;
} else {
document.getElementById('cardNumber').textContent = '获取失败';
}
} catch (error) {
console.error('获取 card_number 失败:', error);
document.getElementById('cardNumber').textContent = '错误';
}
}
function waitForContentChange(element) {
return new Promise((resolve) => {
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'childList' && mutation.target.textContent !== '加载中...') {
observer.disconnect(); // 停止观察
resolve(); // 数据更新完成，继续执行打印
}
});
});
observer.observe(element, { childList: true, subtree: true });
});
}
async function initPrintProcess() {
const cardNumberElement = document.getElementById('cardNumber');
await fetchCardNumber();
await waitForContentChange(cardNumberElement);
window.print();
}
window.onload = initPrintProcess;
</script>
</body>
</html>
3 工作原理：
请求 card_number 并更新 #cardNumber 内容。
MutationObserver 监听 #cardNumber 是否改变，一旦 card_number 被填充，就触发 resolve()。
数据更新后自动调用 window.print()，确保不会在数据未加载前打开打印预览。
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）