修改打印数据格式，下面界面实现打印功能

ZengTao

2024-08-08 918c870a2bc093f22b6e80e7ed447aba0b161f4a

 UI-Project/src/views/UnLoadGlass/loadmachinerack.vue

@@ -13,6 +13,7 @@
import request from "@/utils/request";
import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
import { WebSocketHost, host } from '@/utils/constants'
import PrintFlow from './PrintFlow.vue'
const dialogFormVisiblea = ref(false)
const dialogFormVisiblea2 = ref(false)
const dialogFormVisibleaDownGlass = ref(false)
@@ -30,6 +31,9 @@
const timeRange = ref(["2022-01-01", "2025-01-01"])
const selectValuesa = reactive({});
const selectOptionsa = ref([]);
const dialogTableVisible = ref(false)
const printFlowCardId = ref('')
const printLayer=ref('')

const handleInputChangea = (value, rowId) => {
  // 更新对应行的 select 值  
@@ -230,8 +234,55 @@
}


const open=async()=>{
  router.push({path: '/UnLoadGlass/PrintFlow'})
const open=async(row)=>{

  printFlowCardId.value=row.flowCardId;
  printLayer.value=row.layer
  dialogTableVisible.value = true;
  setTimeout(() => {
    printFlowCard(); // 替换成你要执行的函数名
    }, 1000);
  ;
}

const printFlowCard = () => {
  // 需要打印的局部区域赋予"print-wrap"的id
  let el = document.getElementById("child");
  let doc = document;
  let body = doc.body || doc.getElementsByTagName("body")[0];
  let printId = "print-" + Date.now();

  // 创建无副作用的打印容器(因不确定页面的打印元素有无其它样式)
  let content = doc.createElement("div");
  content.id = printId;

  // 样式控制与打印无关的元素隐藏
  let style = doc.createElement("style");
  style.innerHTML =
      "body>#" +
      printId +
      "{display:none}@media print{" +
      "@page {" +
      "    size: auto; " +
      "    margin: 2mm 2mm 0mm 1mm; " +
      "  }body>:not(#" +
      printId +
      "){display:none !important}body>#" +
      printId +
      "{display:block;padding-top:1px}}";
  //
  content.innerHTML = el.outerHTML;
  // // console.log("el.outerHTML", el.outerHTML);
  body.appendChild(style);

  // 与style元素设置的样式相配合
  // 把打印内容的元素添加到body(作为body的子元素，可用body的子选择器 '>' 控制打印样式)
  body.appendChild(content);
  setTimeout(() => {
    window.print();
    body.removeChild(content);
    body.removeChild(style);
  }, 20);
}


@@ -273,7 +324,7 @@
                  @click="handleBindRack(scope.row)">{{ $t('reportWork.bindingshelves') }}</el-button>
                <el-button size="mini" type="text" plain @click="handleBindRack2(scope.row)">{{ $t('reportWork.clear')
                  }}</el-button>
                  <el-button @click="open()">111</el-button>
                  <el-button @click="open(scope.row)" :disabled="scope.row.flowCardId==null">打印</el-button>
              </template>

            </el-table-column>
@@ -377,6 +428,22 @@
      </div>
    </template>
  </el-dialog>

  <el-dialog
        id="sizePrintCalrd"
        v-model="dialogTableVisible"
        destroy-on-close
        style="width: 75%;height:75% ">
      <!-- <template #header="{ close, titleId, titleClass }">
        <el-button  @click="printFlowCard" >打印</el-button>
      </template> -->
      <print-flow
          id="child"
          :printFlowCardId="printFlowCardId"
          :printLayer="printLayer"
          style="width: 100%;height: 100%"/>
    </el-dialog>

</template>
<style scoped>
#dt {
@@ -421,4 +488,10 @@
  margin-top: -40px;
  margin-left: 100px;
}

:deep(#sizePrintCalrd .el-dialog__body) {
  height: 85%;
  width: 100%;
  overflow-y: auto;
}
</style>