Vue_New/src/xt_pages/DepositManagement/print/printindex.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>

    <div class="app-container">
      <div class="btn">
        <el-button type="primary" @click="to_print">打印</el-button>
      </div>
      <div id="dialysis-print-box">
        <div class="dialysis-print-order">
          <div class="print">
            <h2>收据凭证</h2>
            <p>收款日期： 2022年4月27日</p>
            <div class="content">
              <div style="display: flex; padding: 0 30px">
                <div style="display: flex">
                  <div>收款单位：</div>
                  <div
                    style="min-width: 224px; border-bottom: 1px solid #000"
                  ></div>
                </div>
                <div style="display: flex">
                  <div>收款方式：</div>
                  <div
                    style="min-width: 224px; border-bottom: 1px solid #000"
                  ></div>
                </div>
              </div>
              <div style="display: flex; padding: 0 30px">
                <div>人民币：</div>
                ￥
                <div
                  style="min-width: 225px; border-bottom: 1px solid #000"
                ></div>
              </div>
              <div style="display: flex; padding: 0 30px">
                <div>收款是由：</div>
                <div style="width: 86%; border-bottom: 1px solid #000"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BreadCrumb from "@/xt_pages/components/bread-crumb";
export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "押金管理" },
        { path: "/DepositManagement/DepositSearch", name: "打印凭证" },
      ],
    };
  },
  methods: {
    to_print() {
      const style =
        '@media print {.dialysis-print-order{width:960px;margin:0 auto} .print h2{text-align: center;} .print p{width: 85%;text-align: right;} .content{width: 70%;height: 250px;border: 1px solid #000;margin: 20px auto;display: flex;flex-direction: column;justify-content: space-evenly;}';
      printJS({
        printable: "dialysis-print-box",
        type: "html",
        style: style,
        scanStyles: false,
      });
    },
  },
};
</script>

<style scoped>
.btn {
  position: absolute;
  top: 60px;
  right: 40px;
}

.print h2 {
  text-align: center;
}

.print p {
  width: 85%;
  text-align: right;
}
.content {
  width: 70%;
  height: 250px;
  border: 1px solid #000;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
</style>