vue实现打印预览和打印（vue实现打印预览功能）

在Vue中实现打印预览和打印功能，你可以使用原生的JavaScript方法，或者使用第三方库，如vue-html2pdf 或 print.js。

以下是使用原生JavaScript方法实现打印功能的基本步骤：

1. 创建一个新的窗口或者iframe，将要打印的内容写入。
2. 调用新窗口或iframe的print()方法。

以下是一个简单的Vue组件示例，它包含一个打印按钮，点击该按钮会触发打印功能：

<template>  
  <div>  
    <div ref="printSection">  
      <h1>{{ title }}</h1>  
      <p>{{ description }}</p>  
    </div>  
    <button @click="print">打印</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      title: 'Vue 打印示例',  
      description: '这是一个Vue打印功能的简单示例。'  
    }  
  },  
  methods: {  
    print() {  
      let printContents = this.$refs.printSection.innerHTML;  
      let originalContents = document.body.innerHTML;  
  
      document.body.innerHTML = printContents;  
  
      window.print();  
  
      document.body.innerHTML = originalContents;  
    }  
  }  
}  
</script>

但是这种方法有个问题，就是会改变当前页面的内容。为了避免这个问题，我们可以使用一个新的窗口或者iframe来进行打印。

这是一个使用新窗口进行打印的示例：

<template>  
  <div>  
    <div ref="printSection">  
      <h1>{{ title }}</h1>  
      <p>{{ description }}</p>  
    </div>  
    <button @click="print">打印</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      title: 'Vue 打印示例',  
      description: '这是一个Vue打印功能的简单示例。'  
    }  
  },  
  methods: {  
    print() {  
      let printContents = this.$refs.printSection.innerHTML;  
      let popup = window.open('', '_blank');  
      popup.document.write(printContents);  
      popup.document.close();  
      popup.print();  
    }  
  }  
}  
</script>

以上代码实现了基本的打印功能，但并未实现打印预览功能。实现打印预览功能通常需要使用到第三方库，或者利用浏览器的打印对话框进行预览。

如果你想要实现更复杂的打印和预览功能，我建议查看vue-html2pdf或print.js这样的库。它们提供了更多的配置选项，并且可以更好地控制打印和预览的行为。

例如，使用vue-html2pdf库，你可以很容易地将HTML转换为PDF，并提供下载或预览功能。而print.js库则提供了更多的打印选项，包括打印到PDF，打印到纸张，以及自定义打印布局等。

注意：以上代码在真实环境中可能需要进行一些调整，以适应你的具体需求。例如，你可能需要处理跨域问题，或者调整样式以适应打印布局。