vue-实现打印功能

在Vue中实现打印功能，可以通过调用浏览器的window.print()方法来实现。以下是一个简单的Vue组件示例，展示了如何添加一个按钮来触发打印功能：

<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 newContent = printMe.innerHTML;
      let oldContent = document.body.innerHTML;
      document.body.innerHTML = newContent;
      window.print();
      document.body.innerHTML = oldContent;
    }
  }
}
</script>

在这个示例中，我们定义了一个printMe元素，它包含了我们想要打印的内容。print方法通过选取printMe元素的HTML内容，将其设置为当前页面的HTML内容，触发打印，然后恢复原来的内容。这样做可以确保只打印指定的部分，而不会打印其他页面的内容。