vue 调起浏览器打印

1、安装插件

cnpm i vue-print-nb @xkeshi/vue-qrcode --save

2、简单使用

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-dialogtitle="打印预览"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=dataClearNullthis.printDispatch();});},//展示打印派车单弹框（也可直接写在上面方法中）printDispatch() {this.printDialogVisible2=true},
// 处理打印单打印的数据： 将null替换为空字符串clearNull(data) {for (let x in data) {if (data[x] === null) { // 如果是null 把直接内容转为 ''data[x] = '';}}return data;},}
}

vue 调起浏览器打印相关推荐

vue项目使用浏览器打印局部页面
项目需求是生成个报告输出为pdf和word格式下载到本地.本来使用jspdf实现的领导看了说字体太糊.检查发现因为那本来就是张图片映射到pad上的大小改变了所以字体啥的丢帧了. 然后改成用window ...
vue 项目中页面打印实现（去除页眉页脚）
vue 项目中页面打印实现参考文章: 13 Paged media 项目描述: 背景:框架vue.组件 element-ui,已有一个在用的后台管理系统需求:现需在列表页面添加按钮-----打印协 ...
php lodop 实例,Vue使用lodop实现打印小结
一. Lodop与C-Lodop的区别 Lodop打印控件是浏览器插件,与浏览器紧密结合来实现本地打印,是一种内嵌到浏览器里交互方式.(适用浏览器:ie系列.火狐51版及历史版本.谷歌44版及历史版本 ...
vue 监听浏览器页面关闭_前方高能，这是最新的一波Vue实战技巧，不用则已，一用惊人...
❝ 葡萄美酒夜光杯,欲饮琵琶产品催.客户现场君莫笑,古来埋坑几人回? ❞ 最近一直在开发后台管理系统,日复一日的重复着表单表格表格表单,标准的CV仔,感觉好无聊,如何能在这种无聊的开发过程中去提升自己 ...
vue+element-ui+js页面打印（打印elementui的table）
前端调用浏览器打印功能,实现纯前端vue+element-ui+js打印页面功能 1.效果展示 2.封装成公共函数 3.在.vue文件中引入并使用"printExcel"函数 1. ...
打印问题，需求是跳转到打印页面时直接弹出浏览器打印模式弹窗，当用户点击打印或取消打印时再关掉该打印页面并且返回到目标窗口源（父）页面并重载页面数据
可以使用window.print()配合 afterprint事件以及window.opener.location.reload() afterprint:在相关联的文档已开始打印或打印预览已关闭之后 ...
vue2,vue3-调用浏览器打印窗口,或者打印机
vue3-print-nb - npm 下载依赖 yarn add vue-print-nb 在全局main.js内注册依赖 import { createApp } from 'vue' impor ...
VUE 集成 LODOP插件打印
VUE 集成LODOP插件打印 VUE 集成LODOP插件打印 Lodop.C-Lodop使用说明及样例 VUE简单使用lodop 1.创建LodopFuncs.js文件 2.在打印功能vue页面引入 ...
php打印预览jquery,JS实现浏览器打印、打印预览示例
目前正在做浏览器端采用JS方式实现打印这么一个功能,JS打印实现的方法很多,但是兼容各个浏览器实现打印预览的功能有些棘手,现将实现的内容及遇到的问题记录下来,希望有大牛看到所提的问题后可以给予解答,在 ...

vue 调起浏览器打印

1、安装插件

2、简单使用

1、在mian.js中引用

2、在组件中使用

3、项目中使用

1、在components新建PrintButton、Print、Qrcode文件夹及对应的index.vue组件

2、注册全局组件

3、在组件中使用

vue 调起浏览器打印相关推荐

最新文章

热门文章