vue3-print-nb 打印a4宽度

### 使用 `vue3-print-nb` 插件实现A4纸张宽度的页面打印

为了确保使用 `vue3-print-nb` 插件能够按照 A4 纸张的标准尺寸进行打印，需遵循特定配置和样式调整。

#### 1. 安装插件
通过 npm 或 yarn 安装 `vue3-print-nb` 插件：

npm install vue3-print-nb --save

或

yarn add vue3-print-nb

#### 2. 配置 Vue 应用程序引入插件
在 main.js 文件中导入并注册该插件:

import { createApp } from 'vue'
import App from './App.vue'
import Print from 'vue3-print-nb'

const app = createApp(App)

app.use(Print)
app.mount('#app')

#### 3. 设置全局 CSS 样式适配 A4 尺寸
定义专门用于打印场景下的样式规则，在 style.css 中加入如下代码片段来匹配 A4 页面大小 (210mm × 297mm):

@media print {
    body * {
        visibility: hidden;
    }
    
    .print-section, 
    .print-section * {
        visibility: visible;
    }

    .print-section {
        position: absolute;
        top: 0;
        left: 0;
        width: 210mm;
        height: 297mm;
        padding: 25px; /* 调整此值以适应实际需求 */
        box-sizing: border-box;
    }
}

上述代码隐藏除 `.print-section` 及其子元素外的所有内容，并设定固定的宽高比例[^3]。

#### 4. 组件内部应用打印逻辑
创建一个组件实例化对象时调用 `$print()` 方法触发打印行为；同时为需要参与打印的内容包裹一层 div 并赋予类名 "print-section":

<template>
<div id="example">
    <!-- 正常显示区域 -->
</div>

<!-- 打印专用部分 -->
<div class="print-section" ref="contentToPrint">
    <h1>标题</h1>
    <p>正文...</p>
</div>
<button @click="$print($refs.contentToPrint)">点击这里打印</button>
</template>

以上操作实现了当按钮被按下后只针对指定 DOM 结构执行打印命令[^5]。