heli-mes/mes-ui/mes-ui-admin-vue3/src/views/heli/processdesign/printDialog.vue

<template>
  <Dialog
    title="打印预览"
    v-model="dialogVisible"
    width="1000"
    top="0%"
    :before-close="(doClose) => beforeDialogClose(doClose)"
  >
  <el-button @click="outopen" style="float: right;margin-right: 0.5%;">取消</el-button>
  <el-button @click="onPrint" type="primary" style="float: right;margin-right: 1%;">打印</el-button>

    <!-- 打印预览 -->
    <div class="print-wrap page" ref="print">
      <div id="qrCodeContainer"></div>
    </div>
    <template #footer>
      <!-- 【打印】 -->
      <el-button @click="onPrint" type="primary">打印</el-button>
      <el-button @click="outopen">取消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
// import { ref, reactive } from 'vue'
// import { betweenDay, dateFormatter, formatDate } from '@/utils/formatTime'
import QRCode from 'qrcode'
// import * as ProjectOrderApi from '@/api/biz/projectorder'
const dialogVisible = ref(false) // 弹窗的是否展示
let clauseId = null;
const startPageNum=ref(0);
const endPageNum=ref(0);
const onPrint = () => {
  // 拿到打印页面dom节点
  const printNode = document.querySelector('.print-wrap')
  if (!printNode) return
  // 页面文档创建一个空的内框架，用于挂载打印节点，并设置一定的样式
  const newIframe: any = document.createElement('iframe')
  newIframe.setAttribute(
    'style',
    'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;'
  )
  newIframe.setAttribute('align', 'center')
  document.body.appendChild(newIframe)
  // 将打印页面设置为内框架内容
  let doc: any = null
  doc = newIframe.contentWindow.document
  doc.write(`
    <style type="text/css">
      /* 浏览器打印基本样式 */
@page {
  size: 70mm 200mm;
  margin: 0;
   height: 200mm;

}
@media print {
  .page {
    margin: 0;
	display: block;

  }
    .qr-page {
      width: 70mm;
      height: 200mm;
      margin: 0;
      padding: 0;
    }
}

    </style>
    <div>
      ${printNode.innerHTML}
    </div>`)

	console.log(clauseId)

  doc.close()
  // 浏览器打印页面打开渲染
  setTimeout(() => {
    newIframe.contentWindow.focus()
    newIframe.contentWindow.print()
    document.body.removeChild(newIframe) // 移除打印内框架，下次打印下次再挂载
    dialogVisible.value = false
  }, 100)
  // ProjectOrderApi.updatePrintStatus({clauseId:clauseId,printEmp:'',startPageNum:startPageNum.value,endPageNum:endPageNum.value})

}
// / 关闭 Dialog 前的处理逻辑
function beforeDialogClose(doClose: (shouldClose: boolean) => void): void {
  outopen()
}

// 页面关闭重置
const outopen = () => {
  dialogVisible.value = false
}

const printCodeName = ref([])

const datavals = ref([])
/** 打开弹窗 */
const specarr: any = ref([])
const cnenList: any = ref([])
const open = async (bomCode,vals) => {
	console.log("打印预览传输的信息")
  specarr.value = []
  //获取中英文对照表
  // cnenList.value = await ProjectOrderApi.getcnenList()
  console.log(vals)
  datavals.value = []
  printCodeName.value = []
  vals.forEach((item) => {
    const row = {
      blueprintNo: item.blueprintNo ,
    }
    const newName = `${bomCode}-${item.blueprintNo}`
    const row1 = {
      name: newName
    }
    printCodeName.value.push(row1)
    datavals.value.push(row)
  })

  dialogVisible.value = true
  await Promise.all(
    printCodeName.value.map(async (item) => {
      const qrCodeData = await QRCode.toDataURL(item.name)
      const qrCodeElement = document.getElementById('qrCodeContainer')
      if (qrCodeElement) {
          (qrCodeElement.innerHTML +=
            `<div class="page qr-page">
         <div class="qr-code-container" style="padding:0mm;font-size:15px !important;font-weight:700;position: relative; height: 200mm">
         <div style="text-align:center;"> <img src="${qrCodeData}" width="100%"  alt="QR Code"/></div>
            <div style="margin:0 2mm;text-align:left;font-size:19px !important;" >
            <span style="display:block;font-size:17px !important;">图纸编号：${item.name}</span>
            </div>
         
        </div>
      </div>`)
      }
    })
  )
}
//  <p>${datavals.value[0]?.projectSubName},${datavals.value[0].spec},${datavals.value[0].sort},${datavals.value[0].amount}</p>
//  <div class="qr-code-name">${item}</div>
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>

<style scoped lang="scss">
.page {
  width: 70mm;
  min-height: 200mm;
  margin: auto;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/*
	A4的大小：21cm*29.7cm（width:794px;）。
	单位换算：1 inch = 2.54 cm 1mm = 96 px 1 cm = 37.79528 px*/
</style>