Vue3项目里面：前端做打印页面信息，实现打印功能，前端打印界面某个部门。
一、先看效果：https://i-blog.csdnimg.cn/direct/595765c1e78845329e841a7ac4a76b18.png
二、利用的依赖：
利用的是：vue3-print-nb；
版本号"vue3-print-nb": "^0.1.4",
npm install vue3-print-nb 三、注册利用：
下好依赖后在项目里的 main.js 文件里面注册利用一下
import print from 'vue3-print-nb'
app.use(print); https://i-blog.csdnimg.cn/direct/9d0555972f024cd595d62db2ea1bbef9.png
四、打印页面代码:
通过 v-print="printInfoObj" 自界说指令绑定打印的按钮。
必要打印的地域通过利用 id="printInfo" 绑定。
完备代码：
<template>
<el-button type="primary" v-print="printInfoObj">打印</el-button>
<!-- 需要打印的区域 -->
<div class="print_info_box" id="printInfo">
<div class="title_box">收货人信息表</div>
<div>
<el-row class="public">
<el-col :span="12">
<span>收 货 人：</span>
<span>张三三</span>
</el-col>
<el-col :span="12">
<span>下单日期：</span>
<span>2024-12-05 14:32:55</span>
</el-col>
</el-row>
<el-row class="public">
<el-col :span="12">
<span>收货地址：</span>
<span>北京市-朝阳区-188号</span>
</el-col>
<el-col :span="12">
<span>订单编号：</span>
<span>8564795214986528</span>
</el-col>
</el-row>
</div>
<table border="1" cellspacing="0" width="100%" class="tableStyle">
<tr height="60">
<td>商品</td>
<td colspan="2">规格</td>
<td>合计</td>
</tr>
<tr height="50">
<td>连衣裙</td>
<td>白色*5</td>
<td>粉色*15</td>
<td>20</td>
</tr>
<tr height="50">
<td>牛仔裤</td>
<td>黑色*13</td>
<td>蓝色*19</td>
<td>32</td>
</tr>
<tr height="50">
<td>冲锋衣</td>
<td>黑色*3</td>
<td>白色*1</td>
<td>4</td>
</tr>
<tr height="50">
<td colspan="3">总计</td>
<td>56</td>
</tr>
</table>
<div>
<el-row class="public">
<el-col :span="6">
<span>调配人：</span>
<span>________</span>
</el-col>
<el-col :span="6">
<span>核对人：</span>
<span>________</span>
</el-col>
<el-col :span="6">
<span>对接人：</span>
<span>________</span>
</el-col>
<el-col :span="6">
<span>发货人：</span>
<span>________</span>
</el-col>
</el-row>
</div>
</div>
</template>
<script setup>
// 打印区域配置对象
const printInfoObj = {
id: "printInfo",
popTitle: "收货人信息表", // 打印页面的页眉
preview: false,// 是否开启预览
beforeOpenCallback(vue) {
// console.log('触发打印工具打开前回调')
vue.printLoading = true;
},
openCallback(vue) {
// console.log('触发打印工具打开的回调')
vue.printLoading = false;
},
closeCallback() {
// console.log('触发关闭打印工具回调')
},
previewBeforeOpenCallback() {
// console.log('触发预览前回调')
},
previewOpenCallback() {
// console.log('触发预览的回调')
},
};
</script>
<style lang="less" scoped>
// 去掉页眉页脚
// @page {
// size: auto;
// margin: 0mm;
// }
// 隐藏左下方页脚URL链接
// @page {
// size: A4(JIS);
// margin: 10mm 18mm;
// }
.print_info_box {
padding: 25px 50px;
.title_box {
text-align: center;
font-size: 26px;
font-weight: 700;
margin-bottom: 30px;
}
.tableStyle {
font-size: 14px;
color: #000;
text-align: center;
margin-bottom: 30px;
}
.public {
margin-bottom: 15px;
}
}
</style>
五、欢迎参考：
打印的方式许多，各人选择得当自己项目标即可
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]