vue实现前端打印效果

如图效果所示（以下演示代码）

<template>
  <div>
    <el-button v-print="printObj" type="primary" plain @click="handle">
      {{ text }}
      
    </el-button>

 <div style="display: none">
      <div id="print-table">
        <div style="width: 100%; text-align: center; padding: 10px 0">
          <h3 style="font-weight: bolder">入库单</h3>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import serviceApi from "@/api/order/service";

const props = defineProps({
//父组件传递的数据
  data: {
    type: Object,
    default: {},
  },
 
});

const printObj = {
  id: "print-table",
  popTitle: "",
  extraCss: "/style/table.css",
};



const handle = () => {
  console.log("-----------------handle------------------------");
};
</script>

<style lang="scss" scoped>
.aline {
  text-align: left;
  padding-left: 20px;
}
</style>