Vue 2.5更新数据后调用window.print()打印页面空白问题求助

问题场景 #

使用Vue2.5开发时，在created钩子通过axios请求/api/pickUp/preview接口获取数据，更新preview、shipment等组件数据；在updated钩子中，当preview为true时，通过this.$nextTick()调用window.print()执行打印，但打印页面显示空白。实际页面已加载出数据，尝试过setTimeout或在created末尾直接执行$nextTick，问题仍未解决。

相关代码 #

created函数 #

created() {
  axios.get(`/api/pickUp/preview`, {
    params: {
      code,
    },
  }).then((res) => {
    this.preview = true;
    this.shipment = res.data.data.shipments;
    this.selectedShipment = res.data.data.shipments;
    this.price = res.data.data.price;
  });
},

updated函数 #

updated() {
  if(this.preview) {
    this.$nextTick(() => {
      window.print();
    });
  }
},

现象 #

• 打印预览/页面：空白无内容
• 实际页面：数据已正常渲染展示

解决方案 #

1. 调整打印触发时机，避免在updated钩子中执行 #

updated会在组件每次DOM更新后触发，包括打印操作可能引发的变更，容易陷入循环且时机不可控。直接在接口回调里处理打印，确保数据和DOM完全渲染：

created() {
  axios.get(`/api/pickUp/preview`, {
    params: {
      code,
    },
  }).then((res) => {
    this.preview = true;
    this.shipment = res.data.data.shipments;
    this.selectedShipment = res.data.data.shipments;
    this.price = res.data.data.price;
    
    // 等待DOM渲染完成后执行打印，加短延迟确保样式加载
    this.$nextTick(() => {
      setTimeout(() => {
        window.print();
      }, 200);
    });
  });
},

同时删除updated中的打印逻辑，避免重复触发。

2. 适配打印媒体样式 #

打印页面的样式默认可能和屏幕样式不同，需单独配置：

@media print {
  /* 确保所有元素可见，隐藏不需要打印的内容 */
  body * {
    visibility: visible;
  }
  .no-print {
    display: none !important;
  }
  /* 可选：设置打印时的页面边距、字体等 */
  @page {
    margin: 1cm;
  }
}

检查模板中是否有元素在打印时被设置为display: none，确保目标打印区域样式正常。

3. 验证DOM渲染状态 #

在$nextTick中打印目标元素内容，确认数据是否已渲染到DOM：

this.$nextTick(() => {
  const printContent = document.querySelector('.print-container');
  console.log(printContent ? printContent.innerHTML : '元素未找到');
  window.print();
});

如果控制台能输出内容但打印空白，重点排查打印样式；如果控制台无内容，检查数据绑定是否正确（比如shipment是否在模板中用v-for或{{}}正确渲染）。

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