vue 调起浏览器打印

最新推荐文章于 2024-04-29 10:42:46 发布

开心就好1314520

最新推荐文章于 2024-04-29 10:42:46 发布

阅读量3.2k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_38388578/article/details/122947579

版权

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-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;
    },
    }
}

开心就好1314520

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
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> <div id="printDom" >
复制链接

扫一扫