vue实现页面打印的四种方法

在Vue中实现页面打印，可以通过以下四种方法：

1. 使用JavaScript的window.print()方法。
2. 使用Vue指令结合JavaScript实现打印。
3. 使用第三方插件如print-js。
4. 使用CSS媒体查询实现打印样式。

以下是每种方法的示例代码：

1. 使用window.print()：

// 在methods中添加
methods: {
  printPage() {
    window.print();
  }
}
 
// 在模板中使用
<button @click="printPage">打印页面</button>

2. 使用Vue指令：

// 自定义指令
Vue.directive('print', {
  inserted: function (el) {
    el.addEventListener('click', () => {
      window.print();
    });
  }
});
 
// 在模板中使用
<button v-print>打印页面</button>

3. 使用print-js插件：

   首先安装print-js：

npm install print-js --save

然后在代码中使用：

import printJS from 'print-js';
 
export default {
  methods: {
    printPage() {
      printJS({ printable: 'printable-area', type: 'html', scanStyles: false });
    }
  }
}

4. 使用CSS媒体查询：

@media print {
  body * {
    visibility: hidden;
  }
  #printable-area, #printable-area * {
    visibility: visible;
  }
  #printable-area {
    position: absolute;
    left: 0;
    top: 0;
  }
}

<div id="printable-area">
  <!-- 需要打印的内容 -->
</div>
<button onclick="window.print();">打印区域</button>

以上四种方法可以实现Vue页面的打印需求。选择哪种方法取决于具体场景和需求。