2024年Web前端最新利用VUE实现打印功能，大厂面试必备技能问题

在Vue中实现打印功能，可以通过window.print() API来实现。以下是一个简单的例子：

<template>
  <div>
    <div id="printMe">
      <!-- 需要打印的内容 -->
      <h1>这是一个标题</h1>
      <p>这里是内容，将会被打印。</p>
    </div>
    <button @click="print">打印</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    print() {
      let printMe = document.querySelector('#printMe');
      let printWindow = window.open('', '_blank');
      printWindow.document.write(printMe.innerHTML);
      printWindow.document.close();
      printWindow.focus();
      printWindow.print();
      printWindow.close();
    }
  }
}
</script>

在这个例子中，我们定义了一个id为printMe的DOM元素，它包含了我们想要打印的内容。点击按钮时，会触发print方法，该方法会创建一个新的窗口，将printMe元素的HTML内容写入新窗口，然后关闭新窗口并调用打印功能。这样就实现了在Vue应用中的打印功能。