vue3-print打印eletable某一行的数据

主页面的表格

javascript 复制代码

<template>
    <el-table :data="list">
        <el-table-column label="操作" align="center">
           <template #default="scope">
             <el-button
                link
                type="primary"
                @click="handleType(scope.row)"
                :loading="qrCodeLoading">
                打印
              </el-button>
            </template>
        </el-table-column>
    </el-table>
    // 打印子页面
    <type ref="qrRef" @success="loadData"/>
</template>
<script>

const qrRef = ref()
const qrCodeLoading = ref(false)

/** 打印 */
const multiple = ref([])
const handleType = async (row) => {
  try {
    multiple.value.push(row)
    console.log('ss', multiple)
    qrRef.value.open(multiple)
    // todo 接口
    multiple.value = []
  } catch {
  } finally {
    qrCodeLoading.value = false
  }
}

const loadData = async (arg) => {
  // todo 打印完毕
}

</script>

子页面---

javascript 复制代码

<template>
  <Dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="1000px"
      height="1200px"
      @close="handleCloseModal"
  >
    <e-row>
      <el-button type="success" plain v-print="printObj">
        <Icon icon="ep:download"/>
        打印
      </el-button>
    </e-row>
    <el-row class="row-con" id="printMe">
      <div
          v-for="item in tableData"
          :ref="setItemRef"
          :key="item.partCode"
          style="width: 100%"
       >
       <div style="border: 2px black; margin-top:105px; 
                    margin-left: 54px; margin-right: 55px; margin-bottom: 8px;">
          <div style="width: 100%; display: flex; flex-direction: row">
               {{ 需要打印的内容+tableData }}
          </div>
       </div>
      </div>
    </el-row>
  </Dialog>
</template>

<script setup lang="ts">
import qrcode from 'qrcode'

const dialogVisible = ref(false)
const dialogTitle = ref('条码打印')

const handleCloseModal = () => {
  dialogVisible.value = false
}
const tableData = ref([])

onMounted(() => {
  // console.log(t.userInfo.account)
})

const itemRefs = ref([])
const setItemRef = (el) => {
  if (el) {
    itemRefs.value.push(el)
  }
}
const printObj = ref({
  id: 'printMe',
  popTitle: '',
  maxWidth: 302, // 最大宽度
  extraCss:
      'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css',
  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
  // extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>,<style> #printMe { height: 302px !important; } <style>',//  可以传进去  style tag 标签；注意要逗号分隔   解决特定区域不显示问题
  beforeOpenCallback(vue) {
    vue.printLoading = true
    console.log('打开之前')
  },
  openCallback(vue) {
    vue.printLoading = false
    console.log('执行了打印', vue)
  },
  closeCallback(vue) {
    console.log('关闭了打印工具', vue)
  }

})
const open = (data) => {
  dialogVisible.value = true
  console.log('data', data)
  tableData.value = data.value
  console.log('tableData', tableData.value)
  tableData.value.forEach((item) => {
    //var code = 'your-data' // 替换为你需要生成二维码的数据
    qrcode.toDataURL(item.partCode, (err, url) => {
      if (err) {
        console.error(err)
      } else {
        console.log('toDataURL', url)
      }
    })
  })
}
defineExpose({open}) // 提供 open 方法，用于打开弹窗
</script>
<style scoped lang="scss">
.row-con {
  display: flex;
  flex-flow: row wrap;
}

.printContainer {
  -webkit-print-color-adjust: exact;
  /* 打印时表格上边框会消失 貌似是因为 使用伪元素的缘故 */
  ::v-deep(.el-table__inner-wrapper::after) {
    height: 0px !important;
  }

  /* 使用自己的表格上边框 */
  ::v-deep(.el-table__inner-wrapper) {
    border-top: 1px solid #e5e7eb;
  }

  /* 打印时边框太小会被挤没，那让边框变大点就好了*/
  ::v-deep(.el-table__cell) {
    border-right: 2px solid #e5e7eb;
  }
}

</style>