vue 调起浏览器打印
1、安装插件cnpm i vue-print-nb @xkeshi/vue-qrcode --save2、简单使用1、在mian.js中引用import Print from 'vue-print-nb'Vue.use(Print)2、在组件中使用<button v-print="'#printDom'">打印</button><!-- 打印内容区域 -->&l
·
1、安装插件
cnpm i vue-print-nb @xkeshi/vue-qrcode --save2、简单使用
1、在mian.js中引用
import Print from 'vue-print-nb'
Vue.use(Print)2、在组件中使用
<button v-print="'#printDom'">打印</button>
<!-- 打印内容区域 -->
<div id="printDom" >
...
</div>3、项目中使用
1、在components新建PrintButton、Print、Qrcode文件夹及对应的index.vue组件
Print文件夹下index.vue
<template>
<el-dialog
title="打印预览"
v-dialogDrag
:modal-append-to-body='true'
:visible.sync="printDialogVisible"
width="80%"
class="printDialog"
@closed='closePrintDialog'
>
<slot name="content"></slot>
<span slot="footer" class="dialog-footer">
<el-button @click="closePrintDialog">取 消</el-button>
<PrintButtonCom :id='printDivId' :title='printBtnTitle'></PrintButtonCom>
</span>
</el-dialog>
</template>
<script>
export default {
props: {
printDialogVisible:{
type:Boolean,
default:false,
},
printDivId:{
type:String,
default:''
},
printBtnTitle:{
type:String,
default:''
}
},
methods: {
closePrintDialog () {
this.$emit('closePrintDialog')
}
}
}
</script>
<style lang="scss" scoped>
.printDialog{
height:800px!important;
/deep/ .el-dialog__body{
height:600px!important;
overflow-y: scroll;
}
}
</style>
PrintButton文件夹下index.vue
<template>
<el-button type='primary' v-print="print" >{{ title }}</el-button>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "",
},
id:{
type: String,
default: "",
}
},
data() {
return {
print: {
id: this.id,
popTitle: "打印", // 打印配置页上方标题
extraHead: "", //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
preview: "", // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
previewTitle: "", // 打印预览的标题（开启预览模式后出现）,
previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
zIndex: "", // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
clickMounted(){
},
previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
beforeOpenCallback() {
console.log('打印前')
}, // 开启打印前的回调事件
openCallback() {}, // 调用打印之后的回调事件
closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
url: "",
standard: "",
extraCss: "",
},
};
},
};
</script>
<style lang="scss" scoped>
</style>
Qrcode文件夹下index.vue
<template>
<vueQrcode :value='value'></vueQrcode>
</template>
<script>
import vueQrcode from '@xkeshi/vue-qrcode';
export default {
name:'Qrcode',
components: {
vueQrcode
},
props: {
value: {
}
},
}
</script>
<style lang="scss" scoped>
</style>
2、注册全局组件
在components文件夹下新建index.js
import QrcodeCom from './Qrcode/index.vue';
import PrintCom from './Print/index.vue';
import PrintButtonCom from './PrintButton/index.vue';
export default {
install: Vue => {
Vue.component('QrcodeCom', QrcodeCom);
Vue.component('PrintCom', PrintCom);
Vue.component('PrintButtonCom', PrintButtonCom);
}
}
在mian.js中注册
import myCom from './components/index';
Vue.use(myCom)3、在组件中使用
<el-button type="primary" @click="PrintQRcode(form.id)">接运二维码打印预览</el-button>
<el-button type="primary" @click="PrintDispatchList(form.recCode) ">派车单打印预览</el-button>
<PrintCom @closePrintDialog='closePrintDialog1' :printDialogVisible='printDialogVisible1' printDivId='qr_code' printBtnTitle='打印接运二维码'>
<div slot="content" id="qr_code">
<div class="title">
接运二维码打印
</div>
<QrcodeCom :value="20220215001"></QrcodeCom>
</div>
</PrintCom>
<PrintCom @closePrintDialog='closePrintDialog2' :printDialogVisible='printDialogVisible2' printDivId='pai_che_dan' printBtnTitle='打印派车单'>
<div slot="content" id="pai_che_dan" >
<div class="print_title">
派车单打印
</div>
<table border="1" style="width:100%;border-collapse:collapse;text-align:center;margin:0 auto;">
<tr>
<td style="padding: 10px 0;" width="125">逝者姓名</td>
<td width="125">{{printPaiCheDanData.bodyFeederDead.deadName}}</td>
<td width="125">性别</td>
<td width="125">{{printPaiCheDanData.bodyFeederDead.deadGender}}</td>
<td width="125">年龄</td>
<td width="125">{{printPaiCheDanData.bodyFeederDead.deadAge}}</td>
</tr>
<tr>
<td style="padding: 10px 0;">死亡时间</td>
<td>{{printPaiCheDanData.bodyFeederDead.deathDate}}</td>
<td>死亡地点</td>
<td colspan="3">
1、医院
2、家中
3、其他
</td>
</tr>
<tr>
<td style="padding: 10px 0;">死亡原因</td>
<td>{{printPaiCheDanData.bodyFeederDead.deathCause}}</td>
<td>接运时间</td>
<td colspan="3">{{printPaiCheDanData.bodyFeederDead.arrivalTime}}</td>
</tr>
<tr >
<td style="padding: 10px 0;">工作单位</td>
<td>{{printPaiCheDanData.bodyFeederDead.unit}}</td>
<td>逝者身份证号</td>
<td colspan="3">{{printPaiCheDanData.bodyFeederDead.certificateNo}}</td>
</tr>
<tr>
<td style="padding: 10px 0;">接运地点</td>
<td style="overflow:hidden">{{printPaiCheDanData.bodyFeederDead.transportPlace}}</td>
<td>殡仪车</td>
<td>{{printPaiCheDanData.bodyFeederRecInfo.carType }}</td>
<td>卫生棺</td>
<td>{{printPaiCheDanData.bodyFeederRecInfo.coffin}}</td>
</tr>
<tr>
<td style="padding: 10px 0;">承办人签字</td>
<td>{{printPaiCheDanData.bodyFeederRecInfo.contactName}}</td>
<td>承办人身份证号</td>
<td colspan="3" ></td>
</tr>
<tr>
<td style="padding: 10px 0;">与逝者关系</td>
<td>{{printPaiCheDanData.bodyFeederRecInfo.relation}}</td>
<td>联系电话</td>
<td colspan="3">{{printPaiCheDanData.bodyFeederRecInfo.contactPhone}}</td>
</tr>
<tr>
<td style="padding: 10px 0;">出车时间</td>
<td></td>
<td>归车时间</td>
<td colspan="3"></td>
</tr>
<tr>
<td style="padding: 10px 0;">停放位置</td>
<td></td>
<td>接运司机</td>
<td colspan="3">{{printPaiCheDanData.bodyFeederRecInfo.driverName}}</td>
</tr>
</table>
<QrcodeCom :value="20220215001"></QrcodeCom>
</div>
</PrintCom>export default {
name: "VehicleSchedulingList",
data() {
return {
printDialogVisible1:false,//打印接运码弹框
printDialogVisible2:false,//打印派车单弹框
printPaiCheDanData:{
bodyFeederDead:{
deadName:'',
deadGender:'',
deadAge:'',
deathDate:'',
deathCause:'',
arrivalTime:'',
unit:'',
certificateNo:'',
transportPlace:''
},
bodyFeederRecInfo:{
carType:'',
coffin:'',
contactName:'',
relation:'',
contactPhone:'',
driverName:''
}
},//打印派车单数据
}
},
methods: {
//获取打印数据
PrintQRcode(id) {
// alert('打印二维码')
Type["PrintQRcode"](id).then((res) => {
let {data} = res;
this.printServiceAgreement();
});
},
//展示打印接运二维码弹框
printServiceAgreement() {
this.printDialogVisible1=true
},
//获取打印服务协议数据
PrintDispatchList(recCode) {
let query = {
businessCode: recCode
}
Type["printDispatchOrder"](query).then((res) => {
let {data} = res;
let dataClearNull = this.clearNull(data)
this.truckingOrder = dataClearNull;
//派车单数据赋值
this.printPaiCheDanData=dataClearNull
this.printDispatch();
});
},
//展示打印派车单弹框（也可直接写在上面方法中）
printDispatch() {
this.printDialogVisible2=true
},
// 处理打印单打印的数据： 将null替换为空字符串
clearNull(data) {
for (let x in data) {
if (data[x] === null) { // 如果是null 把直接内容转为 ''
data[x] = '';
}
}
return data;
},
}
}
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献19条内容
所有评论(0)