vue 使用print-js 打印渲染不出来问题

下面是详细的攻略说明：

问题描述

Vue 使用 print-js 打印时，有时候会存在打印内容渲染不出来的问题。这种情况通常出现在需要打印的内容比较复杂，包含了 Vue 组件、异步请求等复杂元素。

解决方法

方法一：将需要打印的内容先进行渲染

需要将需要打印的内容先使用 Vue 的 $mount 方法进行渲染，然后将渲染后的 DOM 节点作为参数传递给 print-js 进行打印。

示例代码：

import printJS from 'print-js';

export default {
  methods: {
    print() {
      let printContent = this.$refs.printContent;
      let printHTML = printContent.$el.outerHTML;
      printJS(printHTML, 'html');
    }
  },
  mounted() {
    let printContent = this.$refs.printContent;
    printContent.$mount();
  }
}

在上面的示例代码中，print() 方法会使用 printJS 打印传递进去的 printHTML 内容，而 printHTML 则是通过 $mount 渲染后的外层 DOM 节点字符串。

需要注意的是，在 $mount() 方法调用之前，需要将需要打印的内容从 v-if 等条件渲染指令中移除，以保证该内容得到正确的渲染。

方法二：使用 Vue 的 $nextTick 方法

在执行打印操作的时候，使用 Vue 的 $nextTick 方法，等待页面元素渲染完成之后再进行打印，以确保打印内容能够正确的被渲染。

示例代码：

import printJS from 'print-js';

export default {
  methods: {
    print() {
      let printContent = this.$refs.printContent;
      this.$nextTick(() => {
        let printHTML = printContent.$el.outerHTML;
        printJS(printHTML, 'html');
      })
    }
  }
}

在上面的示例代码中，print() 方法会在点击打印按钮之后，等待页面元素渲染完毕之后再调用 printJS 进行打印。

总结

以上是使用 Vue 打印时渲染不出来的问题导致的解决方法，根据实际需求，选择一种合适的方法即可解决该问题。