<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 = truethis.$nextTick(() => {if (id) {request({url: `/api/project/PostInvestmentCollection/getPrintDetail/${id}`,method: "get",}).then((res) => {this.list = res.datathis.loading = falsethis.$nextTick(() => {this.print();});}).finally(() => {this.loading = false});}});},},
};
</script><style lang="scss" scoped></style>

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

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