vue 针试打印机实现

效果

导入插件

# 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>
  
  <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', // 这里是要打印元素的ID
        popTitle: ' ', // 打印的标题
        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>
    
    <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>
                  <div
                    class="
                      item1-input
                      table-item-right-line
                      normal-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>
                  <div
                    class="
                      item1-input
                      table-item-right-line
                      normal-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>
                  <div
                    class="
                      item1-input
                      table-item-right-line
                      normal-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>
                  <div
                    class="
                      item1-input
                      table-item-right-line
                      normal-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">
                客诉内容：<span
                  class="
                    normal-input
                    normal-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">
                      <span
                        class="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">
                <div
                  class="
                    yuanying-box-left
                    normal-input-line-height
                    table-item-right-line
                    normal-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>
              <div
                class="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-01span>
          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 } = res
          this.dataInfo = { ...data }
        })
        .catch((res) => {})
        .finally(() => {})
    },
  },
}
script>

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

完成