1 简介

如果需要在浏览器特别时chrome使用打印控件，这将可能需要获取后端服务的数据，比如该次打印的次数或者单号，这里汇集了三条方法处理后端数据返回和浏览器打印预览加载时机同步的问题，如监听DOM，使用Promise链式调用，使用固定延时。

2 使用 Promise 链式执行

如果你确保 fetch 之后 DOM 会立即更新，可以用 Promise 直接等待 fetch 结果。

  <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;
                  return true; // 数据成功获取
              } else {
                  document.getElementById('cardNumber').textContent = '获取失败';
                  return false;
              }
          } catch (error) {
              console.error('获取 card_number 失败:', error);
              document.getElementById('cardNumber').textContent = '错误';
              return false;
          }
      }

      window.onload = async function() {
          const success = await fetchCardNumberAndPrint();
          if (success) {
              window.print();
          }
      };
  </script>

🔹 工作原理：

直接 await 获取数据后，再 立即调用 window.print()。
避免了 setTimeout，但需要 确保 DOM 会立即更新，否则可能仍然会出现 window.print() 太快触发的问题。

5 小结

推荐使用 MutationObserver（方法 1） ：

    能确保 DOM 变化完成后再打印。
    适用于异步数据填充的情况（如 API 响应时间不固定）。

使用 Promise 方式（方法 2）：

  适用于数据返回后 DOM 立刻 更新的情况。
  但如果浏览器存在 渲染延迟，可能 window.print() 还是会比页面更新更早触发。

如果你希望兼容性更好，且确保数据填充后再打印，建议使用 方法 2（MutationObserver）！