pdf生成改成后台运行

src/components/reportPdf/exportPDF.js

@@ -3,9 +3,10 @@ import jsPDF from 'jspdf';
 import axios from 'axios'
 import Cookies from 'js-cookie'
 
-export const exportPDF = async (elementId, fileName = 'document.pdf') => {
+// export const exportPDF = async (elementId, fileName = 'document.pdf') => {
+export const exportPDF = async (element, fileName = 'document.pdf') => {
   // 获取要转换的DOM元素
-  const element = document.getElementById(elementId);
+  // const element = document.getElementById(elementId);
   if (!element) throw new Error('找不到目标元素');
   
   // 获取元素原始尺寸

src/components/reportPdf/index.vue

@@ -2,7 +2,7 @@
     <div class="page adffcacjc">
         <div class="content">
             <div class="c_pdf">
-                <div id="pdf-content">
+                <div id="pdf-content" style="width: 630px;" ref="pdfRef">
                     <pdf :reportData="reportData"></pdf>
                 </div>
             </div>
@@ -17,7 +17,7 @@
                 <i class="el-icon-close cdc_close" style="font-size: 20px;color: #393939;" @click.stop="closeReportAlert"></i>
                 <img src="@/assets/images/agent/report.gif">
                 <p>{{ reportData.enterpriseName }} - {{ reportData.teamName }}</p>
-                <p>pdf正在生成中，预计需要时间<span>3-5分钟</span></p>
+                <p>pdf正在后台生成中，预计需要时间<span>3-5分钟</span>，在此期间可进行其他操作，成功后将在上方出现提示。</p>
                 <p>生成后可点击对应报告操作中的<span>导出报告</span>进行查看</p>
                 <div class="zt_btn" @click.stop="closeReportAlert">我知道了</div>
             </div>
@@ -29,10 +29,6 @@
     import { exportPDF } from './exportPDF';
     import pdf from './pdf.vue'
     const props = defineProps({
-      show:{
-        type: Boolean,
-        default: false
-      },
       reportData:{
         type: Object,
         default: () => {}
@@ -48,63 +44,62 @@
     })
 
     import _this from '@/main.js'
-    import { ref, getCurrentInstance, onMounted } from 'vue'
+    import { ref, getCurrentInstance, onMounted, nextTick } from 'vue'
     const { proxy } = getCurrentInstance();
     const reportData = ref(props.reportData);
     const reportId = ref(props.reportId);
     const reportName = ref(props.reportName);
     const reportShow = ref(false);
-    const isCreateReport = ref(false);
-    const isAlert = ref(false);
+    const pdfRef = ref(null);
     const emit = defineEmits(['cancel','refreshReportList']);
     import { updateReportPdfUrl } from '@/api/agent/index.js';
 
     const cancel = () => {
-        if(isCreateReport.value){
-            isAlert.value = true;
-            _this.$alert('PDF报告正在生成中，取消操作将会停止生成，是否取消？', '温馨提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                showCancelButton: true,
-                }
-            ).then(res=>{
-                emit('cancel');
-                proxy.$message.error('报告生成已取消！');
-            }).catch(()=>{});
-        }else emit('cancel');
+        emit('cancel');
     }
 
     const exportToPDF = async () => {
+        const clonedEl = cloneEl();
+        await nextTick();
         try {
-            isAlert.value = false;
-            isCreateReport.value = true;
-            props.show = false;
             reportShow.value = true;
             // 滚动到顶部确保完整渲染
             window.scrollTo(0, 0);
             // 避免异步渲染问题
             await new Promise(resolve => setTimeout(resolve, 500));
-            const res = await exportPDF('pdf-content', reportName.value+'.pdf');
-            isCreateReport.value = false;
+            // const res = await exportPDF('pdf-content', reportName.value+'.pdf');
+            const res = await exportPDF(clonedEl, reportName.value+'.pdf');
             if(res.data && res.data.code === 0) {
                 updateReportPdfUrl({id:reportId.value, fileUrl:res.data.data}).then(resu => {
                     if(resu.code!==0) return proxy.$message.error(res.msg)
                     proxy.$message.success('生成成功！');
-                    props.show = false;
                     reportShow.value = false;
                     emit('refreshReportList',reportData.value.relationId);
                     cancel();
                 })
             }
         } catch (error) {
-            if(!isAlert.value) proxy.$message.error('报告生成失败！请稍后再试！');
-            props.show = false;
+            proxy.$message.error('报告生成失败！请稍后再试！');
             reportShow.value = false;
+            cancel();
         }
     };
-
+    const cloneEl = () => {
+        const targetEl = proxy.$refs.pdfRef; // 通过 ref 获取
+        // 2. 克隆元素并插入到 body 末尾（不触发 Vue 更新）
+        const clonedEl = targetEl.cloneNode(true);
+        clonedEl.style.position = "fixed";
+        clonedEl.style.left = "-9999px"; // 移出屏幕外
+        clonedEl.style.visibility = "visible"; // 强制显示
+        clonedEl.style.display = "block"; // 覆盖原隐藏样式
+        document.body.appendChild(clonedEl);
+        return clonedEl
+    }
     const closeReportAlert = () => {
         reportShow.value = false;
+        nextTick(()=>{
+            cancel();
+        })
     }
     
     onMounted(() => {
@@ -160,7 +155,7 @@
         }
     }
     .cus_dialog_content{
-        width: 400px;
+        width: 500px;
         background: linear-gradient( 180deg, #FDF2FB 0%, #FFFFFF 100%);
         border-radius: 6px;
         padding: 36px 68px;