heli-mes/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/A3print.vue

<template>
  <Dialog title="打印预览" v-model="dialogVisible" :draggable="false" width="1400">
    <!-- 打印预览 -->
    <div class="print-wrap page" ref="print">
      <table border="2" cellspacing="0" id="table">
        <tbody>
          <tr>
            <td colspan="4">
              <div style="width: 100px; text-align: center;">
                <img :src="logoDataUrl" style="width:100%" alt="" />
              </div>
            </td>
            <td colspan="32">
              <span style="font-size: 22px; font-weight: 800;letter-spacing: 5px;">子项目跟踪表</span>
            </td>
            <td colspan="4" style="padding: 5px 0">
              <div style="border-bottom: 1px solid #666; padding-bottom: 5px">项目编号</div>
              <div style="padding-top: 5px">{{ `formData.code` }}</div>
            </td>
          </tr>
          <tr>
            <td colspan="4">客户名称：</td>
            <td colspan="12">{{`华东泰克西汽车铸造有限公司`}}</td>
            <td colspan="2">编码：</td>
            <td colspan="6">{{`1006`}}</td>
            <td colspan="3">项目名称：</td>
            <td colspan="15">{{`EA888-k系列摸具`}}</td>

          </tr>
          <tr>
            <td colspan="4">子项目名称：</td>
            <td colspan="8">{{ `曲轴芯盒`}}</td>
            <td colspan="3">项目交货期：</td>
            <td colspan="5">{{`2024/4/10`}}</td>
            <td colspan="2">完成日期</td>
            <td colspan="3">{{``}}</td>
            <td colspan="2">完成日期</td>
            <td colspan="3">{{``}}</td>
            <td colspan="2">完成日期</td>
            <td colspan="3">{{``}}</td>
          </tr>
          <tr>
            <td colspan="3"> BOM清单： </td>
            <td colspan="1"> 编号： </td>
            <td colspan="6">{{`100062401006-HT-EA888-K-ZTX`}}</td>
            <td colspan="30">工艺流程</td>
          </tr>
        </tbody>

        <tbody>
          <tr>
            <td colspan="1"> 序号 </td>
            <td colspan="3">
              <span>名称</span>
            </td>
            <td colspan="1">材质(D)</td>
            <td colspan="1">规格(E)</td>
            <td colspan="1">数量(F)</td>
            <td colspan="1">负责人</td>
            <td colspan="2">完成时间</td>
            <td colspan="1">下料</td>
            <td colspan="1">预计</td>
            <td colspan="1">实际</td>
            <td colspan="1">车床</td>
            <td colspan="1">预计</td>
            <td colspan="1">实际</td>
            <td colspan="1">热处理</td>
            <td colspan="1">预计</td>
            <td colspan="1">实际</td>
            <td colspan="1">磨床</td>
            <td colspan="1">预计</td>
            <td colspan="1">实际</td>
            <td colspan="1">线割</td>
            <td colspan="1">预计</td>
            <td colspan="1">实际</td>
            <td colspan="1">数控</td>
            <td colspan="1">预计</td>
            <td colspan="1">实际</td>
            <td colspan="1">火花</td>
            <td colspan="1">预计</td>
            <td colspan="1">实际</td>
            <td colspan="1">刻字</td>
            <td colspan="1">预计</td>
            <td colspan="1">实际</td>
            <td colspan="1">电焊</td>
            <td colspan="1">预计</td>
            <td colspan="1">实际</td>
            <td colspan="1">钻孔</td>
            <td colspan="1">预计</td>
            <td colspan="1">实际</td>
          </tr>
        </tbody>
      </table>
    </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 { Check } from '@element-plus/icons-vue'
import urlimg from '@/assets/imgs/exlogo.png'
const logoDataUrl = ref('') // 存储Logo的Base64编码数据URL
const dialogVisible = ref(false) // 弹窗的是否展示

const formData = ref({
  tablename: [
    {
      index: 1,
      name: '工序'
    },
    {
      index: 2,
      name: '自检'
    },
    {
      index: 3,
      name: '额定工时1'
    },
    {
      index: 4,
      name: '额定工时2'
    },
    {
      index: 5,
      name: '审核者'
    },
    {
      index: 6,
      name: '加工工时1'
    },
    {
      index: 7,
      name: '操作者1',
      date: '日'
    },
    {
      index: 8,
      name: '加工工时2'
    },
    {
      index: 9,
      name: '操作者2',
      date: '日'
    },
    {
      index: 10,
      name: '质检1',
      date: '日'
    },
    {
      index: 11,
      name: '质检2',
      date: '日'
    },
    {
      index: 12,
      name: '备注'
    }
  ]
})

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 {
  width: 29.7cm;
  min-height: 42cm;
  padding: 10mm;
  margin: 20px auto;
  border: 1px #d3d3d3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  position: relative;
  font-size: 14px !important;
}

@page {
  size: A3;
  margin:1cm;
}
@media print {
  .page {
    margin: 10mm;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}
table {
  width: 100%; /* 让表格宽度100%占满其父元素宽度 */
  height: auto; /* 高度根据内容自适应 */
  font-size: 14px;
  text-align: center;
  border-collapse: collapse;
  margin-top: 5mm; /* 添加顶部外边距，替代原先的页内边距 */
  tr{
    td {
    padding: 5px 0;
    border: 1px solid #333;
  }
  }
}
.xh {
  width: 50px !important;
}
.checkbox {
  border: 2px solid #999;
  width: 10px;
  height: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left:10px ;
}
    </style>
    <div>
      ${printNode.innerHTML}
    </div>`)
  doc.close()
  // 浏览器打印页面打开渲染
  setTimeout(() => {
    newIframe.contentWindow.focus()
    newIframe.contentWindow.print()
    document.body.removeChild(newIframe) // 移除打印内框架，下次打印下次再挂载
    dialogVisible.value = false
  }, 100)
}
const outopen = () => {
  dialogVisible.value = false
}
const queryParams: any = ref({
  code: undefined
})
const isSelected = ref([1, 3])

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  //图片处理
  // 在组件挂载后，将Logo图片转换为Base64编码数据URL
  const logoImage = new Image()
  logoImage.src = urlimg // 替换为Logo图片路径
  logoImage.onload = () => {
    const canvas = document.createElement('canvas')
    canvas.width = logoImage.width
    canvas.height = logoImage.height
    const context = canvas.getContext('2d')
    context.drawImage(logoImage, 0, 0)
    const base64String = canvas.toDataURL('image/png')
    logoDataUrl.value = base64String
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>

<style scoped lang="scss">
.page {
  width: 29.7cm;
  min-height: 42cm;
  padding: 10mm;
  margin: 20px auto;
  border: 1px #d3d3d3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  position: relative;
  font-size: 14px !important;
}

@page {
  size: A3;
  margin: 0;
}
@media print {
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}
table {
  width: 100%; /* 让表格宽度100%占满其父元素宽度 */
  height: auto; /* 高度根据内容自适应 */
  font-size: 14px;
  text-align: center;
  border-collapse: collapse;
  margin-top: 5mm; /* 添加顶部外边距，替代原先的页内边距 */
  tr {
    td {
      padding: 2px 0;
      border: 1px solid #333;
    }
  }
}


#lineTd {
  background: #fff
    url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=)
    no-repeat 100% center;
} 
.hr-dotted {
  border: 0;
  border-top: 1px dotted #a2a9b6;
  border-left: 1px dotted #a2a9b6;
}
/*
	A3的大小：29.7cm x 42cm（ width: 419.53px; 调整为A3纸张宽度 min-height: 595.28px;  调整为A3纸张高度 ）
	单位换算：1 inch = 2.54 cm 1mm = 96 px 1 cm = 37.79528 px*/
</style>