效果

導(dǎo)入插件

# 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為例

打印機(jī)封裝

<template><!-- 打印須知 ：A4紙： 尺寸是297mmx210mm ;備注： 主頁(yè)面左右邊距已經(jīng)去除10mm，上下去除6mm;樣式： 需要打印的頁(yè)面根布局需要加上id="myPrint"，否則頁(yè)面中心css 標(biāo)簽樣式不支持--><div class="printer-container"><!--//需要打印的頁(yè)面--><div :class="isTest ? '' : 'printBox'"><slot /></div><!--//通過(guò)按鈕來(lái)調(diào)用--><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: '&nbsp', // 打印的標(biāo)題extraCss: '', // 打印可引入外部的一個(gè) css 文件extraHead: '&nbsp', // 打印頭部文字},}}, } </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; //統(tǒng)一顏色 } .footer-box {display: inline-block; } </style> <style lang="scss"> /* 去掉頁(yè)眉和頁(yè)腳 */ @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; }// 表格內(nèi)容,表格字體大小和顏色統(tǒng)一處理，修改的可能性比較大//表格樣式 .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; }//表格填寫內(nèi)容 .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>

打印機(jī)頁(yè)面

<template><div><!--isTest="true" 測(cè)試的使用會(huì)在布局上顯示 --><printer :isTest="false"><template><div><!-- 根布局要加標(biāo)簽 --><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">訂單號(hào)</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">客訴數(shù)量</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">客訴時(shí)間</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">希望反饋時(shí)間</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">客訴內(nèi)容：<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">業(yè)務(wù)員：<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>市場(chǎng)部處理結(jié)果</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">市場(chǎng)主管：</span><span class="normal-input">{{dataInfo.shichang_admin}}</span></div><div class="bottom-item"><span class="item4">業(yè)務(wù)員：</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>初步處理結(jié)果</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">經(jīng)辦員</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">初判責(zé)任歸屬：<span class="normal-input">{{dataInfo.zhe_ren_frist}}</span></div><div class="yuanying-box-item">預(yù)計(jì)損失金額：<span class="normal-input">{{ dataInfo.last_price }}</span></div><div class="yuanying-box-item">客訴數(shù)量占比：<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">處置對(duì)策：<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">責(zé)任單位：<span class="normal-input">{{dataInfo.dan_wei}}</span></div></div><divclass="kesu-context-bottom table-item-bottom-line gaishanqueren"><div class="zhuguan">改善確認(rèn)：</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">主管確認(rèn)：<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">最終處理結(jié)果：<span class="normal-input">{{dataInfo.resuit}}</span></div><div class="kesu-context-bottom no-bottom"><div class="zhuguan">廠長(zhǎng)確認(rèn)：<span class="normal-input">{{dataInfo.bg_admin}}</span></div><div class="yewuyuan">總經(jīng)理確認(rèn)：<span class="normal-input">{{dataInfo.zhu_guan}}</span></div></div></div><span class="footer">表號(hào):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> <!-- 注意：表格內(nèi)容,表格字體大小和顏色統(tǒng)一處理，修改的可能性比較大，請(qǐng)查看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>

使用打印頁(yè)面

<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>

完成

總結(jié)

以上是生活随笔為你收集整理的vue 针试打印机实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。