Vue3项目里面：前端做打印页面信息，实现打印功能，前端打印界面某个部门。 ...

一、先看效果：

二、利用的依赖：

利用的是：vue3-print-nb；
版本号"vue3-print-nb": "^0.1.4",

1. npm install vue3-print-nb

复制代码

三、注册利用：

下好依赖后在项目里的 main.js 文件里面注册利用一下

1. import print from 'vue3-print-nb'
4. app.use(print);

复制代码

四、打印页面代码:

通过 v-print="printInfoObj" 自界说指令绑定打印的按钮。
必要打印的地域通过利用 id="printInfo"  绑定。
完备代码：

1. <template>
2.   <el-button type="primary" v-print="printInfoObj">打印</el-button>
4.   <!-- 需要打印的区域 -->
5.   <div class="print_info_box" id="printInfo">
6.     <div class="title_box">收货人信息表</div>
7.     <div>
8.       <el-row class="public">
9.         <el-col :span="12">
10.           <span>收&nbsp; 货&nbsp; 人：</span>
11.           <span>张三三</span>
12.         </el-col>
13.         <el-col :span="12">
14.           <span>下单日期：</span>
15.           <span>2024-12-05 14:32:55</span>
16.         </el-col>
17.       </el-row>
18.       <el-row class="public">
19.         <el-col :span="12">
20.           <span>收货地址：</span>
21.           <span>北京市-朝阳区-188号</span>
22.         </el-col>
23.         <el-col :span="12">
24.           <span>订单编号：</span>
25.           <span>8564795214986528</span>
26.         </el-col>
27.       </el-row>
28.     </div>
29.     <table border="1" cellspacing="0" width="100%" class="tableStyle">
30.       <tr height="60">
31.         <td>商品</td>
32.         <td colspan="2">规格</td>
33.         <td>合计</td>
34.       </tr>
35.       <tr height="50">
36.         <td>连衣裙</td>
37.         <td>白色*5</td>
38.         <td>粉色*15</td>
39.         <td>20</td>
40.       </tr>
41.       <tr height="50">
42.         <td>牛仔裤</td>
43.         <td>黑色*13</td>
44.         <td>蓝色*19</td>
45.         <td>32</td>
46.       </tr>
47.       <tr height="50">
48.         <td>冲锋衣</td>
49.         <td>黑色*3</td>
50.         <td>白色*1</td>
51.         <td>4</td>
52.       </tr>
53.       <tr height="50">
54.         <td colspan="3">总计</td>
55.         <td>56</td>
56.       </tr>
57.     </table>
58.     <div>
59.       <el-row class="public">
60.         <el-col :span="6">
61.           <span>调配人：</span>
62.           <span>________</span>
63.         </el-col>
64.         <el-col :span="6">
65.           <span>核对人：</span>
66.           <span>________</span>
67.         </el-col>
68.         <el-col :span="6">
69.           <span>对接人：</span>
70.           <span>________</span>
71.         </el-col>
72.         <el-col :span="6">
73.           <span>发货人：</span>
74.           <span>________</span>
75.         </el-col>
76.       </el-row>
77.     </div>
78.   </div>
79. </template>
81. <script setup>
82. // 打印区域配置对象
83. const printInfoObj = {
84.   id: "printInfo",
85.   popTitle: "收货人信息表", // 打印页面的页眉
86.   preview: false,  // 是否开启预览
87.   beforeOpenCallback(vue) {
88.     // console.log('触发打印工具打开前回调')
89.     vue.printLoading = true;
90.   },
91.   openCallback(vue) {
92.     // console.log('触发打印工具打开的回调')
93.     vue.printLoading = false;
94.   },
95.   closeCallback() {
96.     // console.log('触发关闭打印工具回调')
97.   },
98.   previewBeforeOpenCallback() {
99.     // console.log('触发预览前回调')
100.   },
101.   previewOpenCallback() {
102.     // console.log('触发预览的回调')
103.   },
104. };
105. </script>
107. <style lang="less" scoped>
108. // 去掉页眉页脚
109. // @page {
110. //   size: auto;
111. //   margin: 0mm;
112. // }
114. // 隐藏左下方页脚URL链接
115. // @page {
116. //   size: A4(JIS);
117. //   margin: 10mm 18mm;
118. // }
120. .print_info_box {
121.   padding: 25px 50px;
123.   .title_box {
124.     text-align: center;
125.     font-size: 26px;
126.     font-weight: 700;
127.     margin-bottom: 30px;
128.   }
130.   .tableStyle {
131.     font-size: 14px;
132.     color: #000;
133.     text-align: center;
134.     margin-bottom: 30px;
135.   }
137.   .public {
138.     margin-bottom: 15px;
139.   }
140. }
141. </style>

复制代码

五、欢迎参考：

打印的方式许多，各人选择得当自己项目标即可

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。