固定延时处理控件数据加载问题
【摘要】 1 简介在浏览器特别时chrome使用打印控件，这将可能需要获取后端服务的数据，比如该次打印的次数或者单号，这里汇集了三条方法处理后端数据返回和浏览器打印预览加载时机同步的问题，如监听DOM，使用Promise链式调用，使用固定延时。如此在打印控件之前调用服务接口，如 GET /user/card_info 获取到固定单号 card_number之后 再使得chrome浏览器打开预览页保证...
1 简介
在浏览器特别时chrome使用打印控件，这将可能需要获取后端服务的数据，比如该次打印的次数或者单号，这里汇集了三条方法处理后端数据返回和浏览器打印预览加载时机同步的问题，如监听DOM，使用Promise链式调用，使用固定延时。
如此在打印控件之前调用服务接口，如 GET /user/card_info 获取到固定单号 card_number之后 再使得chrome浏览器打开预览页保证数据正确。
2 使用固定延时
比如可以使用 JavaScript 先请求 /user/card_info 接口获取 card_number，然后填充到页面中，再调用 window.print() 触发打印预览。可以使用 fetch 或者 XMLHttpRequest 进行接口请求，确保在获取到数据后再执行 print()。
实现步骤：
调用 GET /user/card_info 接口获取 card_number。
将 card_number 填充到页面。
等待数据加载完成后调用 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 fetchCardNumberAndPrint() {
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;
// 确保数据加载后再调用打印
setTimeout(() => {
window.print();
}, 500); // 500ms 延迟确保页面渲染
} else {
document.getElementById('cardNumber').textContent = '获取失败';
}
} catch (error) {
console.error('获取 card_number 失败:', error);
document.getElementById('cardNumber').textContent = '错误';
}
}
// 确保页面加载完成后执行
window.onload = fetchCardNumberAndPrint;
</script>
</body>
</html>
工作原理：
异步请求数据：使用 fetch 获取 card_number 并填充到 #cardNumber 元素。
等待数据加载后调用 window.print()：避免页面还未更新时就触发打印。
setTimeout 确保页面渲染完成：避免浏览器在数据未更新前就打开打印预览。
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）