关于打印出现空白的问题

问题

在打印的需求中，我们一般是将数据展示在页面中，然后通过调用window.print()，将页面打印出来
但是这里有一个顺序问题，我们需要先加载完页面才能进行打印，不然就会出现白屏问题。

解决方法

1. this.nextTick()

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。
但是 mounted（） 不会承诺所有的子组件也都一起被挂载。所以在mounted中执行this.nextTick（）会有子组件还没加载完成的情况。

async mounted() {
    await this.getShoppingList(); // 获取数据
    this.$nextTick(() => {
        window.print();
    });
  },

2. 构建异步操作Promise（）

将请求的数据封装成异步的Promise，
调用Promise.all(),等到所以异步执行完成，在执行打印

async mounted() {
    await Promise.all([
      this.getPrintList(), // 获取数据
      this.loadImage('https://xxxxx.png'), // 获取图片
    ]);
    window.print();
  },
methods: {
loadImage(src) {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = resolve;
        img.onerror = reject;
        img.src = src;
      });
    },
}

！！！如有错误欢迎留言