vue实现网页打印

实现网页打印的方法

在Vue项目中实现网页打印功能，可以通过以下几种方式实现：

使用window.print()方法

调用浏览器原生打印API是最简单的方式。在需要打印的组件中，添加一个按钮并绑定打印方法：

methods: {
  printPage() {
    window.print();
  }
}

使用CSS控制打印样式

通过@media print媒体查询可以自定义打印时的样式：

@media print {
  .no-print {
    display: none;
  }
  body {
    font-size: 12pt;
  }
}

使用vue-print-nb插件

安装vue-print-nb插件可以更方便地实现打印功能：

npm install vue-print-nb --save

在main.js中引入并使用：

import Print from 'vue-print-nb'
Vue.use(Print)

在组件中使用v-print指令：

<button v-print="printObj">打印</button>

data() {
  return {
    printObj: {
      id: 'printArea',
      popTitle: '打印标题'
    }
  }
}

创建打印专用组件

对于复杂打印需求，可以创建专门用于打印的组件：

<template>
  <div id="print-area" class="print-only">
    <!-- 打印内容 -->
  </div>
</template>

<style>
.print-only {
  display: none;
}

@media print {
  body * {
    visibility: hidden;
  }
  .print-only, .print-only * {
    visibility: visible;
  }
  .print-only {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}
</style>

处理分页问题

使用CSS的page-break属性控制打印分页：

.page-break {
  page-break-after: always;
}

注意事项

打印前建议调用window.print()前先进行预览，不同浏览器对打印的支持可能有差异。对于复杂表格或布局，可能需要专门设计打印优化版本。打印功能在移动端可能受限，需考虑用户体验。