vue-print-nb 插件打印有两页

-print-nb插件是一个Vue.js的插件，可以实现在Vue项目中的打印功能。如果打印出来的内容超过一页，可以通过CSS样式来控制分页。具体方法如下：

1. 在需要打印的元素上添加CSS样式`page-break-after: always;`，这样就可以控制每个元素在打印时分页。
2. 如果需要在打印时隐藏某些元素，可以使用CSS样式`@media print { ... }`，在其中添加需要隐藏的元素的CSS样式。

下面是一个示例代码，可以实现在打印时将内容分为多页：

<template>
 <div>
    <div class="print-content">
      <!-- 打印内容 -->
    </div>
  </div>
</template>

<script>
  export default {
    mounted() {
      // 打印
      this.$print('.print-content');
    }
  }
</script>

<style>
  /* 分页样式 */
  .print-content {
    page-break-after: always;
  }

  /* 隐藏元素样式 */
  @media print {
    .no-print {
      display: none;
    }
  }
</style>

相关问题

vue2 使用vue-print-nb实现打印功能_vue-print-nb插件在手机上没有效果

以下是使用vue-print-nb插件实现打印功能的示例代码：

1. 首先，安装vue-print-nb插件：

npm install vue-print-nb --save

2. 在Vue项目的入口文件中引入vue-print-nb插件：

import Vue from 'vue'
import Print from 'vue-print-nb'

Vue.use(Print)

3. 在需要打印的组件中，使用v-print指令来触发打印功能：

<template>
  <div>
    <!-- 打印按钮 -->
    <button v-print="'printArea'">打印</button>

    <!-- 需要打印的内容 -->
    <div id="printArea">
      <!-- 这里是需要打印的内容 -->
    </div>
  </div>
</template>

请注意，为了使打印功能在手机上生效，你需要确保以下几点：
- 确保你的手机浏览器支持打印功能。
- 确保你的打印内容在手机上可见，不会被隐藏或溢出屏幕。
- 确保你的打印内容的样式在手机上正常显示。

vue-print-nb打印插件怎么获取打印总页数和当前打印的第几页

要获取打印总页数和当前打印的第几页，可以使用vue-print-nb插件中提供的`beforePrint`和`afterPrint`钩子函数。

在`beforePrint`钩子函数中，可以通过`this.pageCount`获取打印总页数，通过`this.currentPage`获取当前打印的页码。在`afterPrint`钩子函数中同样可以获取这两个值，但此时已经完成了打印操作。

下面是使用示例：

import Vue from 'vue'
import VuePrintNB from 'vue-print-nb'

Vue.use(VuePrintNB)

export default {
  methods: {
    handlePrint() {
      this.$print({
        beforePrint() {
          console.log(`总共 ${this.pageCount} 页，当前打印第 ${this.currentPage} 页`)
        },
        afterPrint() {
          console.log(`打印完成，总共 ${this.pageCount} 页`)
        }
      })
    }
  }
}

需要注意的是，在`beforePrint`和`afterPrint`钩子函数中，`this`指向的是打印窗口中的`window`对象，因此需要使用箭头函数或将`this`保存在变量中。