Vue打印时跳转至专用路由的实现方案咨询

直接通过beforeprint/afterprint事件跳转路由容易出现异常，核心原因是事件触发时机和路由切换的异步特性冲突，比如路由还未完成切换就弹出打印框，或者打印完成后路由栈状态混乱。以下是两种可行的替代方案：

方案一：用隐藏iframe加载打印页面（推荐） #

无需修改路由，通过创建隐藏iframe隔离打印页面样式，同时避免路由跳转带来的问题：

// 自定义打印触发函数
function triggerPrint() {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = '/print'; // 你的打印页面地址
  document.body.appendChild(iframe);
  
  iframe.onload = () => {
    iframe.contentWindow.print();
    // 打印完成后清理iframe
    setTimeout(() => {
      document.body.removeChild(iframe);
    }, 1000);
  };
}

// 拦截Ctrl+P默认行为，替换为自定义打印
document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.key === 'p') {
    e.preventDefault();
    triggerPrint();
  }
});

对于Safari移动端的系统分享打印，无法通过事件拦截，建议在页面添加自定义打印按钮，引导用户点击调用triggerPrint()。

方案二：调整路由跳转与打印的时机逻辑 #

如果坚持使用路由跳转，需确保路由切换完成后再触发打印，同时规避afterprint的冲突：

1. 原页面代码：

window.addEventListener('beforeprint', (e) => {
  e.preventDefault(); // 阻止默认打印弹窗
  router.push('/print').then(() => {
    // 路由切换完成后通知打印页面触发打印
    window.postMessage({ type: 'triggerPrint' }, location.origin);
  });
});

2. 打印页面代码：

// 监听消息触发打印
window.addEventListener('message', (e) => {
  if (e.data.type === 'triggerPrint') {
    window.print();
  }
});

// 打印完成后延迟回退路由，避免事件冲突
window.addEventListener('afterprint', () => {
  setTimeout(() => {
    router.go(-1);
  }, 500);
});

注意：部分浏览器不支持阻止beforeprint的默认行为，这种情况下方案一的兼容性更好。

内容的提问来源于stack exchange，提问作者Archimedes Trajano