二维码打印排版

zhouwx

2024-08-22 e8ae17c0fbe5dc0a5424905c738004b143d9ce2c

 src/views/hazardousChemicals/warehouseManage/components/printCode.vue

@@ -31,16 +31,17 @@
        <el-table-column align="center" >
          <template #default="scope">
            <div :id="scope.row.code">
              <div style="display: flex;flex-direction: column;align-items: center;justify-content: center">
                <div style="font-size:14px;margin-top:10px;">{{scope.row.name}}—{{scope.row.productSn}}</div>
                <vue-qr :size="80" :margin="0" :auto-color="true" :dot-scale="1" :text="scope.row.code" style="margin-top:10px;"></vue-qr>
                <div style="font-size:10px;margin-top:10px;">{{scope.row.code}}</div>
              <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
                <div style="font-size:14px;margin-bottom: 2px" id="codeTitle">{{scope.row.name}}—{{scope.row.productSn}}</div>
                <vue-qr :size="100" :correctLevel="3" colorDark="black" :margin="0" :auto-color="true"  :text="scope.row.code"></vue-qr>
                <div style="font-size:10px;margin-top: 2px">{{scope.row.code}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
          v-model:pager-count="pageCount"
          v-show="state.total > 0"
          :total="state.total"
          v-model:page="state.queryParams.pageNum"
@@ -60,6 +61,7 @@
import {reactive, ref, toRefs} from 'vue'
import VueQr from 'vue-qr/src/packages/vue-qr.vue'
import {ElMessage} from "element-plus";
import printJS from 'print-js';
import {addWarehouse, checkName, editWarehouse} from "@/api/hazardousChemicals/warehouse";
import {verifyPhone} from "@/utils/validate";
import {checkBasicName} from "@/api/hazardousChemicals/basicInfo";
@@ -87,7 +89,7 @@
  chooseList: []

})

const pageCount = ref(3)
const originalList = ref([])
const openDialog = async (type,value) => {
  // state.queryParams.warehouseId =value.warehouseId
@@ -166,6 +168,7 @@
}

const printEvent=() => {

  let data = []
  if(state.chooseList && state.chooseList.length>0){
    data = state.chooseList
@@ -175,7 +178,7 @@
  let qrCodes=''
  for(let index in data){
    console.log(index,'index')
    qrCodes+=`<div class="my-list-col"><div class="centered-content">${document.getElementById(data[index].code).innerHTML}</div></div>`
    qrCodes+=`<div class="my-list-col"><div class="centered-content changeFont">${document.getElementById(data[index].code).innerHTML}</div></div>`
  }
  const printContent=document.createElement('div')
  printContent.innerHTML=qrCodes
@@ -194,8 +197,9 @@
    <style>
      @media print {
        .page-break { page-break-after:always;} /* 定义分页符格式*/
        .centered-content { text-align:center;} /* 居中对齐内容*/
        .centered-content { display: flex;justify-content: center; align-items: center;height: 90vh;} /* 居中对齐内容*/
        @page { size:50mm 40mm;margin:0mm; }
         .changeFont{font-size:12px;transform: scale(0.8);-webkit-transform: scale(0.85);}
      }
    </style>
  </head>
@@ -203,8 +207,18 @@
  </html>
  `)
  printDocument.close()
  let ct = document.getElementById('codeTitle').offsetWidth
  console.log('ct',ct)
  //在打印窗口中调用打印功能
  console.log('printFrame.contentWindow.document.body.style',printFrame.contentWindow.document.body.style)
  // debugger
  // if(ct >= 180) {

  // }else {
  //
  //   printFrame.contentWindow.document.body.style.zoom = '100%'
  // }


  printFrame.contentWindow.print()
  //移除隐藏的iframe元素
  document.body.removeChild(printFrame)
@@ -232,5 +246,6 @@
    flex-direction: column;
    align-items: flex-start;
  }

}
</style>