vue 针试打印机实现
2024-05-31 09:42:13
效果
导入插件
# Vue2.0安装vue-print-nb
npm install vue-print-nb --registry=https://registry.npm.taobao.org#Vue3.0版本安装vue-print-nb
npm install vue3-print-nb --registry=https://registry.npm.taobao.org# Vue2.0引入方式：
### 1. 全局挂载
import Print from 'vue-print-nb'
Vue.use(Print)### 2. 自定义指令
import print from 'vue-print-nb'
directives: {print
}# Vue3.0引入方式：
### 1. 全局挂载
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')### 2. 自定义指令
import print from 'vue3-print-nb'
directives: {print
}
依vue2.0为例
打印机封装
<template><!-- 打印须知 ：A4纸： 尺寸是297mmx210mm ;备注： 主页面左右边距已经去除10mm，上下去除6mm;样式： 需要打印的页面根布局需要加上id="myPrint"，否则页面中心css 标签样式不支持--><div class="printer-container"><!--//需要打印的页面--><div :class="isTest ? '' : 'printBox'"><slot /></div><!--//通过按钮来调用--><div v-print="printObj" class="footer-box"><slot name="printBtn" /></div></div>
</template><script>
export default {name: 'PrinterComponent',props: {isTest: {type: Boolean,default: false,},},data() {return {printObj: {id: 'myPrint', // 这里是要打印元素的IDpopTitle: ' ', // 打印的标题extraCss: '', // 打印可引入外部的一个 css 文件extraHead: ' ', // 打印头部文字},}},
}
</script><style lang="scss" scoped>
.printBox {position: fixed;left: -9999px;top: 0;
}
#myPrint {padding-left: 2mm;padding-right: 2mm;font-family: Microsoft YaHei;color: #000; //统一颜色
}
.footer-box {display: inline-block;
}
</style>
<style lang="scss">
/* 去掉页眉和页脚 */
@media print {@page {size: auto;margin: 3mm auto;margin-bottom: 8mm;}body {height: auto;}
}
// 修改所有checkbox的选择样式
.el-checkbox__inner::after {border-right-color: #409eff;border-bottom-color: #409eff;
}
.el-checkbox__inner {border: 1px solid #409eff;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {background-color: #ffffff;
}// 表格内容,表格字体大小和颜色统一处理，修改的可能性比较大//表格样式
.table-body-border {border: 0.6mm solid #666 !important;border-radius: 1mm !important;
}
.table-item-bottom-line {border-bottom: 0.1mm solid #666 !important;
}
.table-item-right-line {border-right: 0.1mm solid #666 !important;
}
.table-item-top-line {border-top: 0.1mm solid #666 !important;
}
.table-item-left-line {border-left: 0.1mm solid #666 !important;
}//表格填写内容
.normal-input,
.normal-input-padding-left-right,
.normal-input-padding {color: #f1f1f1 !important;font-size: 2mm !important;
}
.normal-input-padding-left-right {padding-left: 2mm !important;padding-right: 2mm !important;
}
.normal-input-padding {padding: 2mm !important;
}
.normal-input-padding-left {padding-left: 2mm !important;
}
.normal-input-padding-right {padding-right: 2mm !important;
}
.normal-input-line-height{line-height: 5mm;
}
</style>
打印机页面
<template><div><!--isTest="true" 测试的使用会在布局上显示 --><printer :isTest="false"><template><div><!-- 根布局要加标签 --><div id="myPrint"><div class="title">客诉处理单</div><div class="table-box table-body-border"><div class="item1-box"><div class="table-item1 table-item-bottom-line"><div class="item1-title table-item-right-line">订单号</div><divclass="item1-inputtable-item-right-linenormal-input-padding-left-right">{{ dataInfo.order_no }}</div></div><div class="table-item1 table-item-bottom-line"><div class="item1-title table-item-right-line">客户名称</div><divclass="item1-inputtable-item-right-linenormal-input-padding-left-right">{{ dataInfo.name }}</div></div><div class="table-item1 table-item-bottom-line"><div class="item1-title table-item-right-line">客诉数量</div><div class="item1-input normal-input-padding-left-right">{{ dataInfo.customer_complaint_number }}</div></div></div><div class="item1-box"><div class="table-item1 table-item-bottom-line"><div class="item1-title table-item-right-line">品名</div><divclass="item1-inputtable-item-right-linenormal-input-padding-left-right">{{ dataInfo.ping_ming }}</div></div><div class="table-item1 table-item-bottom-line"><div class="item1-title table-item-right-line">客诉时间</div><divclass="item1-inputtable-item-right-linenormal-input-padding-left-right">{{ dataInfo.customer_complaint_time }}</div></div><div class="table-item1 table-item-bottom-line"><div class="item1-title table-item-right-line">希望反馈时间</div><div class="item1-input normal-input-padding-left-right">{{ dataInfo.customer_complaint_time }}</div></div></div><div class="kesu-context normal-input-padding-right">客诉内容：<spanclass="normal-inputnormal-input-line-height">{{ dataInfo.customer_complaint_text }}</span></div><div class="kesu-context-bottom table-item-bottom-line"><div class="zhuguan">主管：<span class="normal-input">{{dataInfo.zhu_guan}}</span></div><div class="yewuyuan">业务员：<span class="normal-input">{{dataInfo.ye_wu_yuan}}</span></div></div><div class="shichangbu-box table-item-bottom-line"><div class="shichangbu-left table-item-right-line"><span>市场部处理结果</span></div><div class="shichangbu-right"><div class="shichangbu-right-top table-item-bottom-line"><div class="right-top-item"><span class="name">特采</span><div class="check-box-parent"><el-checkbox:value="dataInfo.shichang_result_state === 1"class="check-box"></el-checkbox></div></div><div class="right-top-item"><div class="name">扣款</div><div class="check-box-parent"><el-checkbox:value="dataInfo.shichang_result_state === 2"class="check-box"></el-checkbox></div></div><div class="right-top-item"><span class="name">退货</span><div class="check-box-parent"><el-checkbox:value="dataInfo.shichang_result_state === 3"class="check-box"></el-checkbox></div></div><div class="right-top-item"><span class="name">其他</span><div class="check-box-parent"><el-checkbox:value="dataInfo.shichang_result_state === 4"class="check-box"></el-checkbox></div></div></div><div class="normal-input-padding normal-input-line-height">{{dataInfo.shichang_result_text}}</div><div class="shichangbu-right-bottom "><div class="bottom-item"><span class="item3">市场主管：</span><span class="normal-input">{{dataInfo.shichang_admin}}</span></div><div class="bottom-item"><span class="item4">业务员：</span><span class="normal-input">{{dataInfo.ye_wu_yuan}}</span></div></div></div></div><div class="shichangbu-box table-item-bottom-line"><div class="shichangbu-left table-item-right-line"><span>初步处理结果</span></div><div class="shichangbu-right"><div class="shichangbu-right-top table-item-bottom-line"><div class="right-top-item"><span class="name">特采</span><div class="check-box-parent"><el-checkbox:value="dataInfo.chubu_resut_state === 1"class="check-box"></el-checkbox></div></div><div class="right-top-item"><span class="name">扣款</span><div class="check-box-parent"><el-checkbox:value="dataInfo.chubu_resut_state === 2"class="check-box"></el-checkbox></div></div><div class="right-top-item"><span class="name">退货</span><div class="check-box-parent"><el-checkbox:value="dataInfo.chubu_resut_state === 3"class="check-box"></el-checkbox></div></div><div class="right-top-item"><span class="name">其他</span><div class="check-box-parent"><el-checkbox:value="dataInfo.chubu_resut_state === 4"class="check-box"></el-checkbox></div></div></div><div class="normal-input-padding normal-input-line-height">{{dataInfo.customer_complaint_text}}</div><div class="shichangbu-right-bottom table-item-top-line"><div class="bottom-item"><span class="item table-item-right-line">品保主管</span><span class="normal-input-padding-left-right">{{dataInfo.chubu_admin}}</span></div><div class="bottom-item"><spanclass="item2 table-item-left-line table-item-right-line">经办员</span><span class="normal-input-padding-left-right">{{dataInfo.jing_ban_yuan}}</span></div></div></div></div><div class="yuanying-box"><divclass="yuanying-box-leftnormal-input-line-heighttable-item-right-linenormal-input-padding-right">原因分析：<span class="normal-input">{{ dataInfo.yuan_yin }}</span></div><div class="yuanying-box-right"><div class="yuanying-box-item">初判责任归属：<span class="normal-input">{{dataInfo.zhe_ren_frist}}</span></div><div class="yuanying-box-item">预计损失金额：<span class="normal-input">{{ dataInfo.last_price }}</span></div><div class="yuanying-box-item">客诉数量占比：<span class="normal-input">{{ dataInfo.zanbi }}</span></div></div></div><div class="kesu-context-bottom table-item-bottom-line"><div class="zhuguan">主管：<span class="normal-input">{{ dataInfo.zhu_guan }}</span></div><div class="yewuyuan">品保：<span class="normal-input">{{ dataInfo.jing_ban_yuan }}</span></div></div><div class="kesu-context">处置对策：<span class="normal-input">{{ dataInfo.duice }}</span></div><div class="kesu-context-bottom no-bottom"><div class="zhuguan"></div><div class="yewuyuan">改善期限：<span class="normal-input">{{ dataInfo.year }}</span><span class="data year">年</span><span class="normal-input-padding-left-right">{{dataInfo.month}}</span><span class="data">月</span><span class="normal-input-padding-left-right">{{dataInfo.day}}</span><span class="data">日</span></div></div><div class="kesu-context-bottom table-item-bottom-line"><div class="zhuguan">主管：<span class="normal-input">{{dataInfo.bg_admin}}</span></div><div class="yewuyuan">责任单位：<span class="normal-input">{{dataInfo.dan_wei}}</span></div></div><divclass="kesu-context-bottom table-item-bottom-line gaishanqueren"><div class="zhuguan">改善确认：</div><div class="yewuyuan"><div class="right-top-item"><span class="name">仍不符合</span><div class="check-box-parent"><el-checkbox:value="dataInfo.gai_shan_que_ren === 1"class="check-box"></el-checkbox></div></div><div class="right-top-item"><span class="name">已改善</span><div class="check-box-parent"><el-checkbox:value="dataInfo.gai_shan_que_ren === 2"class="check-box"></el-checkbox></div></div></div></div><div class="kesu-context-bottom table-item-bottom-line"><div class="yewuyuan">主管确认：<span class="normal-input">{{dataInfo.bg_admin}}</span></div><div class="yewuyuan">审核：<span class="normal-input">{{dataInfo.bg_admin}}</span></div><div class="zhuguan">追查者（品保）：<span class="normal-input">{{dataInfo.shichang_admin}}</span></div></div><div class="kesu-context">最终处理结果：<span class="normal-input">{{dataInfo.resuit}}</span></div><div class="kesu-context-bottom no-bottom"><div class="zhuguan">厂长确认：<span class="normal-input">{{dataInfo.bg_admin}}</span></div><div class="yewuyuan">总经理确认：<span class="normal-input">{{dataInfo.zhu_guan}}</span></div></div></div><span class="footer">表号:R-QL-091-01</span></div></div></template><template #printBtn><div><el-button size="mini" type="primary">打印</el-button></div></template></printer></div>
</template>
<script>
import Printer from '@/components/PrinterComponent/index.vue'
import { getTestPrint } from '@/api/systemmanage'
export default {name: 'SingleAftersale',components: {Printer,},data() {return {checked: false,dataInfo: {},}},mounted() {this._getTestPrint()},methods: {//列表_getTestPrint() {getTestPrint().then((res) => {const { data } = resthis.dataInfo = { ...data }}).catch((res) => {}).finally(() => {})},},
}
</script>
<!-- 注意：表格内容,表格字体大小和颜色统一处理，修改的可能性比较大，请查看PrinterComponent
-->
<style lang="scss">
#myPrint {width: 200mm;.title {padding-top: 5mm;font-size: 6mm;text-align: center;font-weight: 700;}.table-box {margin-top: 5mm;.item1-box {display: flex;height: 12mm;.table-item1 {flex: 1;height: 100%;line-height: 12mm;display: flex;.item1-title {text-align: center;width: 20mm;font-size: 3mm;}.item1-input {flex: 1;font-size: 1mm;}}}.kesu-context {padding-top: 2mm;padding-left: 2mm;font-size: 3mm;min-height: 18mm;padding-bottom: 3mm;}.kesu-context-bottom {display: flex;padding-left: 2mm;font-size: 3mm;padding-bottom: 2mm;.zhuguan {flex: 2;}.yewuyuan {flex: 1;}}.shichangbu-box {display: flex;.shichangbu-left {width: 15mm;text-align: center;font-size: 3mm;padding-left: 1.5mm;display: flex;line-height: 5mm;align-items: center;padding-right: 1.5mm;font-weight: 700;}.shichangbu-right {flex: 1;.shichangbu-right-top {display: flex;padding-left: 5mm;.right-top-item {flex: 1;display: flex;line-height: 8mm;.name {font-size: 3mm;}.check-box-parent {margin-top: -0.2mm;.check-box {margin-left: 2mm;width: 3mm;height: 3mm;}}}}.shichangbu-right-bottom {margin-top: 5mm;line-height: 8mm;display: flex;padding-left: 5mm;.bottom-item {flex: 1;font-size: 3mm;.item,.item2,.item3,.item4 {padding-right: 5mm;display: inline-block;line-height: 8mm;}.item2 {padding-left: 5mm;}.item3,.item4 {padding-right: 0mm;}}}}}.yuanying-box {height: 30mm;display: flex;padding-bottom: 3mm;.yuanying-box-left {padding-top: 2mm;flex: 2;padding-left: 2mm;font-size: 3mm;}.yuanying-box-right {flex: 3;padding-left: 1mm;padding-top: 2mm;height: 100%;padding-bottom: 1mm;display: flex;flex-direction: column;justify-content: space-between;.yuanying-box-item {font-size: 3mm;}}}.no-bottom {padding-bottom: 4mm;.data {margin-left: 1mm;}.year {margin-left: 4mm;}}.gaishanqueren {margin-top: 2mm;padding-bottom: 15mm;margin-bottom: 2mm;.yewuyuan {display: flex;.right-top-item {flex: 1;display: flex;align-items: center;.name {font-size: 3mm;}.check-box-parent {margin-top: -0.2mm;.check-box {margin-left: 2mm;width: 3mm;height: 3mm;}}}}}}.footer {font-size: 3mm;}
}
</style>
使用打印页面
<template><div class="app-container"><single-aftersale /></div>
</template><script>
import SingleAftersale from '@/printpage/SingleAftersale/index.vue'
export default {name: 'Print',components: {SingleAftersale,},data() {return {}},mounted() {},methods: {},
}
</script><style lang="scss" scoped>
</style>完成
vue 针试打印机实现相关推荐
- 验票证明怎么打印_刚买来的针式 打印机怎么测验打印发票
您好!由于您没有提供打印机的型号,所以无法直接给您提供处理方案,您可以参照以下不打印处理流程操作: 您好!如果您使用的是USB数据线,请按以下步骤操作: 请先确保打印机在正常开机状态下,"缺 ...
- 华为OD机试 - 打印机队列（Python）
题目描述 有5台打印机打印文件,每台打印机有自己的待打印队列. 因为打印的文件内容有轻重缓急之分,所以队列中的文件有1~10不同的代先级,其中数字越大优先级越高. 打印机会从自己的待打印队列中选择优先 ...
- 华为OD机试 - 打印机队列（Java JS Python）
题目描述 有5台打印机打印文件,每台打印机有自己的待打印队列. 因为打印的文件内容有轻重缓急之分,所以队列中的文件有1~10不同的代先级,其中数字越大优先级越高. 打印机会从自己的待打印队列中选择优先 ...
- 打印机常见问题故障及解决方法
打印机常见故障及解决方法 一.打印机通电后不能进行任何操作. ⑴.首先要查看打印机的电源指示灯是否已亮,如没有亮就应先检查电源插头和电源线是否存在断路性故障,要是没有发现问题就可再查看电源开关和保险丝 ...
- vue.js 三（数据交互）isomorphic-fetch
至于fetch的介绍,在这里就不多说了,官方和网络上的说明不少 之前使用jquery的Ajax朋友,可以尝试一下使用一下这个新的api 推荐使用isomorphic-fetch,兼容Node.js和浏 ...
- 初学者，学习vue应该从何下手？
如何学习Vue框架?我来说说我当时怎么学的? 首先请允许我讲一下大道理哈: 1.要明白库和框架的区别 2.要明白设计思想 3.然后去掌握基础,随后做项目实操 库和框架的区别 这玩意吧,说白了库就是你写 ...
- Vue数据代理与数据监测
一.数据代理 1.什么是数据代理? 数据代理:通过一个对象代理对另一个对象中属性的操作 2.Vue数据代理 通过vm对象来代理配置对象data中所有属性的操作. (如果想访问data里的数据,可以直接 ...
- 打印机服务器端口无显示器,什么是打印机端口？无法找到打印机端口是怎么回事？...
LPT接口并口: LPT打印终端(line print terminal)是用于使用打印机或扫描仪等其它设备的.大多数计算机都有一个或两个LPT,通常称为LPT1和LPT2,有些计算机支持三个LPT, ...
- 使用Vue框架实现NGA客户端
vue-nga 由于手机配置不太好,刷nga安卓端经常重载,每次进入都要看好几秒的广告..于是用vue.js试着做了一个(常年看帖不回,先只做游客功能- -),在浏览器上面体验还好(还可以全屏!),速 ...
- vue+echarts项目五：商家分布（地图+散点图）
效果如图所示 组件环境准备: MapPage.vue <!--针对于/mappage 这条路径显示 测试显示组件--> <template><div class=&quo ...
最新文章
- Vagrant 管理部署 VirtualBox (推荐使用）
- [云炬python3玩转机器学习笔记] 1-3课程所使用的主要技术栈
- Phaser都不懂，还学什么多线程
- 50种奇妙装置玩法，将STEM教育一网打尽
- ROS(3)订阅者subscriber编程实现
- scrapy_redis项目配置
- Bezier曲线扫盲
- gmail邮箱 收信服务器,用fetchmail 通过gmail 收邮件
- dedeindex php不显示_dede去掉(禁止)首页index.html默认访问 最终显示index.php
- java testwhileidle,springboot使用druid时报错:testWhileIdle is true, validationQuery not set
- 电视ping功能测试软件,PingMon(超级Ping监测工具)
- Arcgis 创建切片包（*.tpk）
- ndo入mysql的一些优化
- 微生物群也有记忆 | 微生物群能被“训练”
- 局部解剖学考试重点总结超级完整
- 电脑上的计算机怎么移动硬盘,苹果笔记本移动硬盘如何使用_怎样在苹果电脑上用移动硬盘-win7之家...
- RC电路的充放过程C语言实现,一种快速放电的RC充放电电路的制作方法
- Winsock 函数
- 【C#】 enum 还能这么玩
- 2018福大软工实践第六次作业