<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-preview-main">
      <div class="JNPF-common-page-header">
        <el-page-header @back="goBack" :content="'打印通知书'" />
        <div class="options">
          <el-button type="primary" @click="print()"> 打 印 </el-button>
        </div>
      </div>
      
      <div v-loading="loading">
      <div ref="print">
        <div style="width: 90%; margin: 30px auto 0 auto;font-size:18px">
          <h1 style="text-align: center;font-size: 34px;letter-spacing:20px">催收函</h1>
          <h2>&nbsp;</h2>
          致：{{list.customerName}}
          <div style="float: right; margin-top: 50px">
            <div style="float: right;">
              <p>{{ formatDate() }}</p>
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
  </transition>
</template>

<script>
import request from "@/utils/request";
import {formatToMoney, formatToNum} from '@/utils'

export default {
  data() {
    return {
      id: "",
      loading: false,
      list: {}
    };
  },
  methods: {
    formatToMoney,
    formatToNum,
    print() {
      let print = this.$refs.print.innerHTML;
      let newTab = window.open("_blank");
      newTab.document.body.innerHTML = print;
      newTab.print();
      newTab.close();
    },
    goBack() {
      this.$emit("hidePrint");
    },
    formatDate() {
      let date = new Date();
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + MM + "-" + d;
    },
    init(id) {
      this.loading = true
      this.$nextTick(() => {
        if (id) {
          request({
            url: `/api/project/PostInvestmentCollection/getPrintDetail/${id}`,
            method: "get",
          })
            .then((res) => {
              this.list = res.data
              this.loading = false
              this.$nextTick(() => {
                this.print();
              });
            })
            .finally(() => {
              this.loading = false
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>

</style>

当父组件调用子组件的init方法多出一个空白页

原因：打印的内容内不能有v-loading