vue-print-nb自定义尾部

您可以通过在打印页面的底部添加自定义内容来实现自定义尾部。

在使用vue-print-nb插件打印页面的时候，可以使用自定义CSS样式来控制打印页面的布局和内容。您可以在打印样式中添加一个固定的底部元素来实现自定义尾部。

首先，在您的Vue组件中，引入vue-print-nb插件并设置相应的配置，确保插件可以正常使用。然后，您可以在组件的样式中添加一个自定义的打印样式，并在其中定义底部元素的样式。

例如，假设您想要在打印页面的底部添加一个版权信息，您可以按照以下步骤操作：

1. 安装vue-print-nb插件：

npm install vue-print-nb --save

2. 在您的Vue组件中引入vue-print-nb插件并设置配置项：

<template>
  <!-- 页面内容 -->
  <div>
    <!-- ... -->
  </div>
  <!-- 打印按钮 -->
  <button @click="print">打印</button>
</template>

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

export default {
  // ...
  methods: {
    print() {
      // 使用vue-print-nb插件打印页面
      this.$print(this.$el);
    }
  },
  // 注册vue-print-nb插件
  plugins: [VuePrintNB]
};
</script>

3. 在组件的样式中添加自定义的打印样式：

@media print {
  /* 打印样式 */
  .print-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #f0f0f0;
    text-align: center;
    line-height: 50px;
  }
}

4. 在组件的模板中添加底部元素，并为其添加相应的class：

<template>
  <!-- 页面内容 -->
  <div>
    <!-- ... -->
  </div>
  <!-- 底部元素 -->
  <div class="print-footer">
    版权信息
  </div>
  <!-- 打印按钮 -->
  <button @click="print">打印</button>
</template>

这样，当您点击打印按钮时，vue-print-nb插件会根据打印样式将页面打印成PDF或者纸质文档，并在底部添加自定义的版权信息。

请注意，以上只是一个示例，您可以根据实际需求进行适当的调整和修改。