当前位置：首页 > news >正文

【弹框组件封装】展示、打印、下载XX表（Base64格式图片）

news 来源：原创 2025/5/17 16:56:45

打印、下载弹框组件

@/components/PrintDialog.vue

<!-- 打印、下载弹框 -->
<template>
  <el-dialog
    :title="title"
    top="3vh"
    append-to-body
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="handleClose"
    width="50%"
  >
    <div ref="printRef">
      <el-image :src="src" :preview-src-list="[src]" />
    </div>
    <div v-if="!isPreview" slot="footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button :loading="downloadLoading" type="primary" @click="handleDownload">下载</el-button>
      <el-button :loading="printLoading" type="primary" @click="handlePrint">打印</el-button>
    </div>
  </el-dialog>
</template>

<script>
import html2canvas from 'html2canvas'
import printJS from 'print-js'

export default {
  name: 'PrintDialog',
  components: {},

  data() {
    return {
      dialogVisible: false,
      downloadLoading: false,
      printLoading: false,
      title: '',
      src: '',
      isPreview: false
    }
  },

  computed: {},

  watch: {},

  created() {},

  methods: {
    open(title, src, isPreview = false) {
      this.title = title
      this.src = src
      this.isPreview = isPreview
      this.dialogVisible = true
    },
    handlePrint() {
      this.printLoading = true
      html2canvas(this.$refs.printRef).then((canvas) => {
        const saveUrl = canvas.toDataURL('image/png')
        printJS({
          printable: [saveUrl],
          type: 'image'
        })
      })
      this.printLoading = false
    },
    handleDownload() {
      this.downloadLoading = true
      html2canvas(this.$refs.printRef)
        .then((canvas) => {
          const imgUrl = canvas.toDataURL('image/png')
          let image = document.createElement('img')
          image.src = imgUrl
          let a = document.createElement('a')
          a.href = imgUrl
          a.download = this.title
          a.click()
          a = null
          image = null
        })
        .finally(() => {
          this.downloadLoading = false
        })
    },
    handleClose() {
      this.title = ''
      this.src = ''
      this.isPreview = false
      this.dialogVisible = false
    }
  }
}
</script>

<style lang='scss' scoped>
@import '@/styles/dialog-scss.scss';
.el-image {
  width: 100%;
}
</style>

组件使用

<template>
	<el-button
	  :disabled="selectList.length !== 1"
	  icon="iconfont ico-daochu"
	  type="text"
	  size="mini"
	  @click="printHandler"
	>
	  打印记分决定操作表
	</el-button>
	<!-- 打印 -->
	<PrintDialog ref="PrintDialogRef" />
</template>

<script>
import { previewScore } from '@/api/twelve-points'
import OperationDialog from './components/OperationDialog'

export default {
 components: { PrintDialog },
  data() {
    return {
      jfbh: ''
    }
  },

  methods: {
    printHandler() {
      console.log('打印记分告知单')

      previewScore({ jdbh: this.jfbh }).then((res) => {
        this.$common.CheckCode(res, null, () => {
          if (!res.data) return
          this.$refs.PrintDialogRef.open('操作表', 'data:image/jpg;base64,' + res.data)
          // this.$refs.PrintDialogRef.open('文件名/弹框title', 'base64前缀' + Base64格式图片)
        })
      })
    },
  }
}
</script>