Vue使用打印功能在 Vue 项目中，你可以通过以下方式实现按钮唤起浏览器打印功能：基本实现方法更完善的打印方案对

在 Vue 项目中，你可以通过以下方式实现按钮唤起浏览器打印功能：

基本实现方法

<template>
  <div>
    <button @click="handlePrint">打印页面</button>
    
    <!-- 打印内容区域 -->
    <div ref="printContent">
      <!-- 这里放置需要打印的内容 -->
      <h1>打印内容标题</h1>
      <p>这是需要打印的内容...</p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handlePrint() {
      // 方法1：直接打印整个页面
      window.print();
      
      // 方法2：打印特定区域内容（更推荐）
      // this.printSpecificContent();
    },
    
    printSpecificContent() {
      // 获取打印内容
      const printContent = this.$refs.printContent.innerHTML;
      
      // 获取原始页面内容
      const originalContent = document.body.innerHTML;
      
      // 替换body内容为要打印的内容
      document.body.innerHTML = printContent;
      
      // 调用打印
      window.print();
      
      // 恢复原始内容
      document.body.innerHTML = originalContent;
      
      // 由于替换了DOM，需要重新绑定Vue实例
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    }
  }
}
</script>

<style>
/* 打印时隐藏按钮 */
@media print {
  button {
    display: none;
  }
}
</style>

更完善的打印方案

对于更复杂的打印需求，可以使用以下改进方案：

<template>
  <div>
    <button @click="printDocument">打印文档</button>
    
    <div class="print-container" ref="printContent">
      <!-- 打印内容 -->
      <h1>重要文档</h1>
      <p>文档内容...</p>
      <table>
        <!-- 表格数据 -->
      </table>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    printDocument() {
      const printWindow = window.open('', '_blank');
      const printContent = this.$refs.printContent.innerHTML;
      
      printWindow.document.open();
      printWindow.document.write(`
        <!DOCTYPE html>
        <html>
          <head>
            <title>打印文档</title>
            <style>
              body { font-family: Arial; margin: 0; padding: 20px; }
              table { border-collapse: collapse; width: 100%; }
              th, td { border: 1px solid #ddd; padding: 8px; }
              th { background-color: #f2f2f2; }
              @page { size: auto; margin: 5mm; }
            </style>
          </head>
          <body>
            ${printContent}
            <script>
              setTimeout(function() {
                window.print();
                window.close();
              }, 100);
            </script>
          </body>
        </html>
      `);
      printWindow.document.close();
    }
  }
}
</script>

使用第三方库

如果需要更强大的打印功能，可以考虑使用第三方库如：

vue-print-nb: 专门为 Vue 设计的打印插件

npm install vue-print-nb --save

使用示例：

<template>
  <div>
    <button v-print="printObj">打印</button>
    <div id="printContent">打印内容...</div>
  </div>
</template>

<script>
import print from 'vue-print-nb'

export default {
  directives: {
    print
  },
  data() {
    return {
      printObj: {
        id: 'printContent',
        popTitle: '打印标题',
        extraCss: 'https://example.com/print.css'
      }
    }
  }
}
</script>

print-js: 支持打印 PDF、HTML、JSON 等多种格式
```
npm install print-js --save
```

注意事项

打印样式可以通过 @media print 媒体查询来定制
打印时默认会去掉背景色，如果需要打印背景色，需要在浏览器设置中开启"背景图形"选项
对于复杂表格，可能需要特别处理分页问题，可以使用 page-break-inside: avoid; 来避免内容被分割
打印前可以动态修改内容，如隐藏不需要打印的元素