integrated_traffic_vue/src/components/print_table_package/index.vue

<template>
  <layout-card>
    <div
      v-for="print in 2"
      :key="print"
      :id="print === 2 ? 'printContent' : ''"
    >
      <slot></slot>
    </div>
    <div class="tc mt-10" v-if="entrance === 'archive'">
      <el-button
        type="primary"
        v-print="printObj"
        v-show="false"
        ref="buttonRef"
      >
        打印
      </el-button>
      <el-button type="primary" @click="fnPrint">打印</el-button>
    </div>
  </layout-card>
</template>

<script setup>
import LayoutCard from "@/components/card/index.vue";
import usePrint from "@/assets/js/usePrint.js";

defineOptions({
  name: "LayoutPrintTablePackage",
});
const props = defineProps({
  theadHeight: {
    type: Number,
    default: 81.59,
  },
  entrance: {
    type: String,
    default: "",
  },
});
const { fnPrint, printObj, buttonRef } = usePrint(props.theadHeight);
</script>

<style lang="scss" scoped>
#printContent {
  width: 210mm;
  margin: auto;
  height: 0;
  overflow: hidden;
  position: relative;
  top: 200px;
}

@media print {
  #printContent {
    top: 0;
  }
}

:deep {
  table {
    border-collapse: collapse;
    width: 100%;

    td {
      border: 1px solid var(--el-border-color);
      padding: 8px 12px;
      font-size: 14px;
    }

    .title {
      background: var(--el-fill-color-light);
      width: 200px;
      text-align: center;
    }
  }
}
</style>