supply-front/src/views/supply/apply/components/design/preview.vue

<template>
  <el-dialog
    class="sub-main"
    :visible.sync="visible"
    :show-close="false"
    :mask-closable="false"
    :close-on-click-modal="false"
    :width="350 + 'mm'"
    @cancel="hideModal"
  >
    <div v-loading="spinning" style="min-height: 100px">
      <div id="preview_content" ref="printDom" />
    </div>
    <template slot="title">
      <div>
        <!-- <div style="margin-right: 20px">打印预览</div> -->
        <el-button :loading="waitShowPrinter" type="primary" icon="printer" @click.stop="print">打印</el-button>
        <!-- <el-button type="primary" icon="printer" @click.stop="toPdf">pdf</el-button> -->
      </div>
    </template>
    <template slot="footer">
      <el-button key="close" type="info" @click="hideModal"> 关闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
// import { downloadPDF } from '@/utils/pdf'
import { addPrint } from './print-data'
import { detailArr } from './print-data'

export default {
    name: 'PrintPreview',
  props: {
    addPrint: {
      type: Function,
      default: null
    },
  },
 
  data() {
    return {
      visible: false,
      spinning: true,
      waitShowPrinter: false,
      // 纸张宽 mm
      width: 0,
      // 模板
      hiprintTemplate: {},
      // 数据
      printData: {},
      loading: true
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    // handleExport() {
    //   downloadPDF(this.$refs.printDom);
    // },
    hideModal() {
      this.visible = false
      this.waitShowPrinter = false
      this.$emit('initPrint')
      // console.log(this.$parent);
    },
    show(hiprintTemplate, printData, width = '210') {
      this.visible = true
      this.width = width
      this.hiprintTemplate = hiprintTemplate
      this.printData = printData

      setTimeout(() => {
        // eslint-disable-next-line no-undef
        $('#preview_content').html(hiprintTemplate.getHtml(printData))
        this.spinning = false
      }, 500)
    },
    print() {

      try {
        if (typeof this.addPrint === 'function') {
          this.addPrint('addPrints').then(() => {
            this.hiprintTemplate.print(
              this.printData,
              {},
              {
                callback: async() => {
                  this.hiprintTemplate = {}
                  // setTimeout(() => {
                  //   console.error('更新发货汇总列表')
                  //   // this.$successMsg('更新成功')
                  // }, 1000)
                  setTimeout(() => {
                    console.error('更新发货汇总列表')
                    this.$emit('refreshList')
                  }, 1000)
                }
              }
            )

          }).catch(err=>{
            this.$errorMsg('刷新重试打印')
          })
        } else {
          throw new Error('加载失败,刷新重试')
        }
      } catch (e) {
        this.$errorMsg(e)
        // '调用打印次数接口失败'
      }

      setTimeout(() => {
        this.hideModal()
      }, 2000)
    }
    // toPdf() {
    //   downloadPDF(this.$refs.printDom);
    //   this.hiprintTemplate.toPdf({}, '打印预览');
    // },
  }
}
</script>

<style scoped>
::v-deep .el-dialog__body {
  padding: 0;
}

::v-deep tr {
  height: 40px !important;
}

::v-deep td {
  height: 40px !important;
  overflow: hidden;
  /* display: -webkit-box; */
  -webkit-line-clamp: 2;
  /* 数值代表显示几行 */
  -webkit-box-orient: vertical;
}

::v-deep .hiprint-printPaper {
  margin: 0 auto;
}

/* ::v-deep tr td {
  border: 0 !important;

} */

::v-deep .hiprint-paperNumber {
  display: none;
}

.ant-modal-body {
  padding: 0px;
}

.ant-modal-content {
  margin-bottom: 24px;
}

@media print {
  /*
  td {
    border: none !important;
  } */
  .drag_item_box {
    height: 100%;
    padding: 6px;
  }

  .drag_item_box > div {
    height: 100%;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .drag_item_box > div > a {
    text-align: center;
    text-decoration-line: none;
  }

  .drag_item_box > div > a > span {
    font-size: 28px;
  }

  .drag_item_box > div > a > p {
    margin: 0;
  }

  .drag_item_title {
    font-size: 16px;
    padding: 12px 6px 0 6px;
    font-weight: bold;
  }

  .card-design {
    overflow: hidden;
    overflow-x: auto;
    overflow-y: auto;
  }

  ::v-deep .el-dialog__body {
    padding: 0;
  }

  ::v-deep table {
    height: 240px !important;
  }

  ::v-deep tr {
    height: 40px !important;
  }

  ::v-deep .hiprint-printPaper {
    margin: 0 auto;
  }

  ::v-deep tr td {
    border: 0 !important;
    /* width: 911px !important;
    height: 529px !important; */
  }

  .ant-modal-body {
    padding: 0px;
  }

  .ant-modal-content {
    margin-bottom: 24px;
  }
}
</style>