vue2 使用vue-print-nb组件打印div区域

Vue2 中，可以使用 `vue-print-nb` 这个第三方插件来实现页面部分区域的打印功能。`vue-print-nb` 允许你在 Vue 组件中轻松地生成预览和导出 PDF 版本，包括打印 HTML 区域。

首先，你需要安装这个插件，可以通过 npm 或 yarn 安装：

npm install vue-print-nb --save
# 或者
yarn add vue-print-nb

然后，在你的 Vue 文件中导入并注册该组件：

import { Printnb } from 'vue-print-nb';

export default {
  components: {
    Printnb,
  },
};

接下来，要在需要打印的 div 区域使用 `Printnb` 组件，并指定你要打印的内容：

<template>
  <div class="print-area">
    <h1>这是一个需要打印的标题</h1>
    <p>{{ someContent }}</p>
    <!-- 这里就是你想要打印的 div 区域 -->
    <div v-if="showPrintArea" @click="printDiv">
      <div ref="printDiv">点击这里打印这部分内容</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPrintArea: false, // 初始隐藏打印区域
      someContent: "这是要打印的文字",
    };
  },
  methods: {
    printDiv() {
      this.showPrintArea = true;
      this.$refs.printDiv.print(); // 调用打印函数
    }
  }
};
</script>

在这个例子中，当用户点击包含 `ref="printDiv"` 的元素时，会显示打印区域并触发打印操作。记得给 `.print-area` 添加 CSS 样式来调整打印布局。