在vue3中使用vue3-print-nb实现打印功能

1. 安装 vue3-print-nb

首先，确保你已经安装了 vue3-print-nb 包。你可以通过 npm 或 yarn 安装它：

npm install vue3-print-nb

或者

yarn add vue3-print-nb

2. 在 Vue 项目中导入并使用

在 Vue 组件中，导入 vue3-print-nb，并在需要的地方使用它。

import { defineComponent } from 'vue';
import Vue3PrintNb from 'vue3-print-nb';

export default defineComponent({
  name: 'MyComponent',
  components: {
    Vue3PrintNb
  }
});

3. 设置打印按钮

在模板中加入一个按钮来触发打印。下面是一个示例，展示了如何使用 vue3-print-nb 进行打印

<template>
  <div>
    <button @click="printContent">打印内容</button>
    <div id="print-section">
      <h1>这是要打印的内容</h1>
      <p>在这里放置你希望打印的内容。</p>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { usePrint } from 'vue3-print-nb';

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const { print } = usePrint();
    
    const printContent = () => {
      print('#print-section');  // 指定需要打印的元素的 id
    };

    return {
      printContent
    };
  }
});
</script>

4. 配置打印样式（可选）

如果需要自定义打印页面的样式，你可以通过 vue3-print-nb 提供的 printStyle 选项来设置。

const { print } = usePrint({
  printStyle: `
    body {
      font-family: Arial, sans-serif;
    }
    #print-section {
      border: 1px solid #ccc;
      padding: 10px;
    }
  `
});

5. 打印完成后的回调（可选）

还可以设置打印完成后的回调函数，使用 afterPrint 选项。

const { print } = usePrint({
  afterPrint: () => {
    console.log('打印完成！');
  }
});

这样，你就可以在 Vue 3 项目中使用 vue3-print-nb 进行打印了。

6、适配A4纸样式设置

我们的需求是支持彩印，并且打印出 UI 设计好的背景，保障每张A4纸都是单独完整的一个全背景图，不能存在内容或背景被截断情况。

<style scope>
@media print {
  @page {
    size: auto;
    margin: 0;
  }
  #printArea {
    width: 1165px;
    margin: 0 auto;
    overflow-y: scroll;
    /* 显示背景图片 */
    -webkit-print-color-adjust: exact;
  }}
</style>